Angular JS下拉列表。从弹出窗口中选择一个值应该将值更新为下拉列表的值

时间:2017-11-20 06:15:56

标签: javascript html angularjs angular-ngmodel

我在angular-JS中有一个下拉列表,其中包含条目列表。此下拉列表旁边有一个按钮,可以打开另一个弹出窗口,它有一个表格格式。它有一个收音机列表每行对应的行。每行与下拉值的值相同。挑战是当我选择其中一行的单选按钮时,下拉列表应该获得从下拉列表中选择的更新值。 / p>

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;
    }
 });

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

1 个答案:

答案 0 :(得分:0)

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,这是案例性的