如何使用AngularJS在下拉列表中设置值？

Question

我需要如何在多个下拉列表中使用angular.js.设置相同的值。我在下面解释我的代码。

<table class="table table-bordered table-striped table-hover" id="dataTable"> 
    <tr> 
    <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i> 
     <BR>Day <i class="fa fa-long-arrow-down"></i> 
    </td> 
    <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour"></td> 
    </tr> 
    <tbody id="detailsstockid"> 
    <tr ng-repeat="days in noOfDays"> 
     <td width="100" align="center" style=" vertical-align:middle" ng-bind="days"></td> 
     <td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours"> 
     <table style="margin:0px; padding:0px; width:100%"> 
      <tr> 
      <td> 
       <select id="coy" name="coy" class="form-control" ng-model="sub_name " ng-options="sub.name for sub in listOfSubjectName track by sub.value"> 
      </select> 
      </td> 
      </tr> 
      <tr> 
      <td> 
       <select id="coy" name="coy" class="form-control" ng-model="fac_name " ng-options="fac.name for fac in listOfFacultyName track by fac.value"> 
      </select> 
      </td> 
      </tr> 
     </td> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 

这里值该表的每一行中动态地设置和值也同样对所有的行和column.My控制器文件代码在下面给出。

$scope.noOfDays = []; 

     $scope.days = { 
      '0': "Monday", 
      '1': 'Tuesday', 
      '2': 'Wednesday', 
      '3': 'Thursday', 
      '4': 'Friday' 
     } 

     $scope.hours = [ 
      '9AM :: 10AM', 
      '10AM :: 11AM', 
      '11:15AM :: 12:15PM', 
      '12:15PM :: 01:15PM', 
      '02PM :: 03PM', 
      '03PM :: 04PM', 
      '04PM :: 05PM' 
     ] 

     for (var i = 0; i < 5; i++) { 
      $scope.noOfDays.push($scope.days[i]); 
     } 
     $scope.listOfSubjectName=[{ 
     name: 'Select Cource', 
     value: '' 
     }] 
     $scope.listOfFacultyName=[{ 
     name: 'Select Faculty', 
     value: '' 
     }] 

在这里，我需要假设我选自select course一个值，其自动和显示是'12:15PM :: 01:15PM'下，所选择的值将在其中下只是下一个3组时间（i.e-'02PM :: 03PM','03PM :: 04PM','04PM :: 05PM）来选择病程下拉列表进行设置。在这里，我可以从任何地方选择价值，但在那之后，选定的价值应该设置下面3组下拉列表。请帮助我。

Answer 1

这里的你在找什么 [jsFiddle]。你将不得不通过调用方法上ng-change事件这样来触发下一个选择项的变化：

<select class="form-control" ng-model="sub_name[days + hour]" ng-change="setSub(days, hour)" ng-options="sub.name for sub in listOfSubjectName track by sub.value"> 

的方法应该是这个样子：

$scope.setFac = function(day, hour){ 
    console.log("set fac "+ day + ", " + hour); 
    var next = 0; 
    $scope.hours.forEach(function(hr){ 
     if(hr === hour || next){ 
      next++; 
     } 
     if(next > 0 && next < 4){ 
      $scope.fac_name[day + hr] = $scope.fac_name[day + hour]; 
     } 
     else{ 
      // clear previous selection 
      $scope.fac_name[day + hr] = null; 
     } 
    }); 
}; 

$scope.setSub = function(day, hour){ 
    console.log("set sub "+ day + ", " + hour); 
    var next = 0; 
    $scope.hours.forEach(function(hr){ 
     if(hr === hour || next){ 
      next++; 
     } 
     if(next > 0 && next < 4){ 
      $scope.sub_name[day + hr] = $scope.sub_name[day + hour]; 
     } 
     else{ 
      // clear previous selection 
      $scope.sub_name[day + hr] = null; 
     } 
    }); 
}; 

这里需要唯一通过使用days和hour值，在每个select项目中识别您的模型。否则，当你选择一个元素时，你所有的select元素都会得到相同的值。

编辑：基于评论

Answer 2

控件中的选定项和listOfSubjectName.name的值具有两个绑定。因此，在JavaScript中更改listOfSubjectName.name，或者更改控件中的值，更新另一个。如果listOfSubjectName.name的值为0，则应该选择该项目。

listOfSubjectName是一个数组，listOfSubjectName.name必须设置为objects.So你的代码更改你在向下

 $scope.listOfSubjectName = [{ name: "a", id: 1 }, { name: "b", id: 2 }]; 
    //default selected value is listOfSubjectName[0] but if you want selected value can listOfSubjectName[1] 
     $scope.sub_name= $scope.listOfSubjectName [1]; 
//select subject name add into the FacultyName array 
$scope.listOfFacultyName=[{ 
     name: 'Select Faculty', 
     value: '', 
     currentsubjectName:$scope.sub_name, 
     }] 

HTML部分综述见其中的一个：

<select id="coy" name="coy" class="form-control" ng-model="fac_name.currentsubjectName" ng-options="fac.name for fac in listOfFacultyName track by fac.value">