Question

我在使用ng-options创建选择选项下拉列表时遇到问题。

范围结构

vm.filters = {
    perPage: 10, 
    settings: {
      perPage: {
        intervals: [
          {
            label: 'All',
            value: null
          }, {
            label: 10,
            value: 10
          }, {
            label: 25,
            value: 25
          }, {
            label: 50,
            value: 50
          }, {
            label: 100,
            value: 100
          }
        ]
      }
    }
 }

Dom Element（angular生成option标签）

<select name="selectPerPage" data-ng-model="vm.filters.perPage" data-ng-options="interval.value as interval.label for interval in vm.filters.settings.perPage.intervals">
    <option label="All" value="object:null">All</option>
    <option label="10" value="number:10" selected="selected">10</option>
    <option label="25" value="number:25">25</option>
    <option label="50" value="number:50">50</option>
    <option label="100" value="number:100">100</option>
</select>

当我将区间数组中第一个对象的value属性从null更改为实际数字时，option元素的范围不会更新。为什么？我怎样才能让它更新？在范围更新时，ng-model几乎不会引用。

Answer 1

如果您使用ng-options，则不应像在选择中那样硬编码选项。你只能硬（一般是空值）。

<select ng-model="vm.filters.perPage" 
        ng-options="interval.value as interval.label for interval in vm.filters.settings.perPage.intervals">
    <option label="All" value="">All</option>
</select>

我不知道interval.value是什么类型（数组，对象，字符串？），但它应该保存在vm.filters.perPage中（假设存在vm.filters）。

Answer 2

您可以尝试使用ng-repeat，这会动态更新选项。但遗憾的是，如果在更新数据时选择了第一个元素，则不会触发ng-change事件，这意味着与ng-model绑定的值将不会更新，您必须手动更新它。

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.filters = {
      perPage: {
        intervals: [{
          label: 'All',
          value: null
        }, {
          label: 10,
          value: 10
        }, {
          label: 25,
          value: 25
        }, {
          label: 50,
          value: 50
        }, {
          label: 100,
          value: 100
        }]
      }
    };
    $scope.update = function() {
      $scope.filters.perPage.intervals[0].value = 1000;
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <!--<select name="selectPerPage" data-ng-model="perPage" data-ng-options="interval.value as interval.label for interval in filters.perPage.intervals"> -->
  <select name="selectPerPage" data-ng-model="perPage">
    <option ng-repeat="interval in filters.perPage.intervals" value="{{interval.value}}">{{interval.label}}</option>
  </select>
{{perPage}}
<button ng-click="update()">Update</button>
</div>

Angular ng-options值在范围更改时不会更新

2 个答案: