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>

这里的值在此表的每一行中动态设置，并且所有行和列的值也相同。我的控制器文件代码如下所示。

 $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'下的一个值，所选值将在select couse下拉列表中设置，该列表仅在接下来的3次设置下（{{ 1}}）自动和display.Here我可以从任何地方选择值，但之后选择的值应该设置下一组3下拉列表。请帮助我。

Answer 1

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

listOfSubjectName是一个数组，listOfSubjectName.name必须设置为其中一个对象。所以代码改变你在下面看到的内容

       $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">

Answer 2

这是您要找的 [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;
        }
    });
};

在这里，您需要使用select和days值在每个hour项中唯一标识您的模型。否则，当您选择一个select元素时，它们将获得相同的值。

编辑：根据评论修改过的代码

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

2 个答案: