Angular JS下拉菜单。从弹出窗口中选择一个值应该更新下拉菜单的值

Question

我在 angular-JS 中有一个下拉列表，其中包含条目列表。此下拉列表旁边有一个按钮，可以再打开一个弹出窗口，它有一个表格格式。它有一个单选列表对应于每一行的框。每一行的值与下拉值的值相同。挑战是当我选择其中一行的此单选按钮时，下拉应获取从下拉列表中选择的更新值。

HTML：

 <div class="form-group">
   <div class="col-md-3" >
             <select id="bidowner" ng-model="bidowner" ng-options= "item.name for item in owners" required>
                <option ng-model = "bidOwner" value=''>Please Select</option>
            </select>

          <button class="btn btn-primary waves-effect waves-light m-b-15" alt="default" data-toggle="modal" data-target="#responsive-modal">
              <a href="#" class="text-white">Check Availability</a>
          </button>
   </div>
</div>




<div id="responsive-modal"   class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; z-index: 9999">
 <table class="table table-border">
     <tbody>
          <tr ng-repeat="x in list">
             <td align="center"><input name="sales" id="" value="1" required="" type="radio" ng-click="onSelected(x.name)"></td>
             <td>{{x.name}}</td>
             <td>{{x.n1}}</td>
          </tr> 
     </tbody> 
</table>

JS：

    var angularApp = angular.module("testApp", []);
    app.controller("testController",function($scope,$http){

          $scope.onSelected = function(value){
          $scope.bidOwner=value;
    }
 });

我试过这样做。但下拉列表中的值没有更新。

Answer 1

var angularApp = angular.module("testApp", []);
app.controller("testController",function($scope,$http){
      $scope.onSelected = function(value){
             $scope.bidOwner=value;
             $scope.apply();  //add this line
      }
});


<div class="form-group">
 <div class="col-md-3" >
         <select id="bidOwner" ng-model="bidowner" ng-options= "item.name for item in owners" required>
         <option ng-model = "bidowner" value=''>Please Select</option>
 </select>
      <button class="btn btn-primary waves-effect waves-light m-b-15" alt="default" data-toggle="modal" data-target="#responsive-modal"><a href="#" class="text-white">Check Availability</a></button>
 </div>
 <div>




 <div id="responsive-modal"   class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; z-index: 9999">
 <table class="table table-border">
 <tbody>
      <tr ng-repeat="x in list">
                      <td align="center"><input name="sales" id="" value="1" required="" type="radio" ng-click="onSelected(x.name)"></td>
                      <td>{{x.name}}</td>
                      <td>{{x.n1}}</td>
       </tr> 
 </tbody> 

注意：您正在更新 bidOwner 但 ngmodel 名称是 bidowner 区分大小写