将选项选择的值传递给角度模型以触发浮动标签

Question

我对下面的代码有疑问，当通过函数“loadStaff”执行 php 脚本时，浮动标签停止工作。浮动标签在执行 php 脚本之前起作用。我有限的知识表明该问题是由于选项选择值未传递给角度模型而导致的，而角度模型又没有触发浮动标签，因为选项选择保留了选定的值($('select#account_list').val('<?php echo $_POST['account_list'];?>')，因为我可以看到它出现了。但是，即使我在选项选择字段中看到选定的值，浮动标签也没有执行。我们如何将选定的值传递给角度模型以触发浮动标签？我的推理可能有误。

    <div ng-app="myApp">
      <form id="orderformstaff" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
        <div class="field" style="width: 100%">
          <label class="show-hide" ng-show="account">Account</label>
          <div class="input-group mb-4">
            <span class="input-group-addon gi gi-user-key"></span>
            <select id="account_list" class="form-control custom-select" name="account_list" ng-model="account" onchange="loadStaff()" autocomplete="on" required/>
              <?php
                $a_list = $DB_CON_A->query("SELECT `id`, `email` FROM `staffs` ORDER BY `id` ASC");
                $data_row = '<option value="" disabled>Choose an account</option>';
                if($a_list !== false) {
                  foreach($a_list as $row){
                    $data_row .=  '<option value="'.$row['email'].'">'.$row['email'].'</option>'."\n";
                  }
                }
                unset($row);
                echo $data_row;
              ?>
            </select>
          </div>
        </div>
      </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
    <script> var myApp = angular.module('myApp', ['ngAnimate']);</script> 
    <script>
      function loadStaff() {
        var form = 
        document.getElementById('orderformstaff');
        form.submit();
      };
    </script>
    <script type="text/javascript"> <!--allows option select to retain value after executing loadStaff-->
      $(document).ready(function(){
        $('select#account_list').val('<?php echo $_POST['account_list'];?>');
      });
    </script>

Answer 1

实际上你不需要使用 AngularJS，因为所有的工作都是用 PHP 完成的。

但是如果你想修复当前代码

删除

$('select#account_list').val('<?php echo $_POST['account_list'];?>');

然后在选择元素上设置属性

<select id="account_list" class="form-control custom-select" ng-init="account = <?php echo $_POST['account_list'];?>" name="account_list" ng-model="account" onchange="loadStaff()" autocomplete="on" required/>

编辑

1. 如果你想使用 AngularJS，你应该使用 angularjs 而不是 PHP 绑定数据。

2. 如果没有 JQuery，则不能使用 $(document).ready 等...

如果你想开始学习AngularJS，你可以从这里开始http://www.journaldev.com/7750/angularjs-simple-forms-tutorial 它在后端使用 PHP。