如何使用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">