Question

我有一个<select>元素，它是从json文件填充的：

<select ng-model="selected_ad" ng-options="ad.title for ad in ads">
  <option value="">Select an Ad</option>
</select>

是否可以使用按钮更改<option>值属性？

例如......

select元素的输出是：

<select ng-model="selected_ad" ng-options="ad.title for ad in ads" class="ng-valid ng-dirty">
<option value="" class="">Select an Ad</option>
<option value="0">Business Development 1</option>
<option value="1">Business Development 2</option>
<option value="2">Business Development 3</option>
<option value="3">Business Development 4</option>
...

我可以创建一个按钮，可能是ng-click循环遍历每个元素并动态更改所选的选项吗？我已经玩了一段时间，但在文档中找不到任何相关内容。

Answer 1

您可能应该使用ng-options中的Object语法：

select as label for (key , value) in object

或者数组语法：

select as label for value in array

这将在选项（您看到的内容）和ng-model的值选项中设置显示标签。

目前，当您使用label for value in array时，您只需设置选项的标签。可以说你的数据模型$ scope.ads看起来像这样：

$scope.ads = [
    { title = 'Business Development 1',
      value = 'bizdev1'
    },
    { title = 'Business Development 2',
      value = 'bizdev2'
    }....
    ];

然后当您使用ng-options = 'ad.value as ad.title for ad in ads'时，您显示的选项将保持不变，但现在选择其中一个选项将导致您的ng-model包含对象的值而不仅仅是一个数字。

如果你需要动态更改值 - 不需要jQuery循环任何东西，Angular有2路数据绑定，这样如果你改变$scope.ads select元素中的值＆＃39 ; s值会随之改变。

有关详情，请查看http://docs.angularjs.org/api/ng.directive:select

编辑 - 如果您想在ng-click之后自己更改实际值，可以通过循环数据并将其递增1来实现此目的（在这种情况下，它会更有意义）将值保留为整数。

如果您想要一个选择某个选项的按钮（假设使用输入框中的ng-model），您可以通过更改选择 ng-model来实现，即： selected_ad。将其更改为您想要选择的值。

编辑2 - 只需更改数据集：

$scope.selected_ad = 1;

$scope.ads = [
{ title = 'Business Development 1',
  value = 1
},
{ title = 'Business Development 2',
  value = 2
}
];

并添加控制器逻辑更改：

$scope.changeSelection = function(e) {
   e.stopPropagation();
   e.preventDefault();
   ++$sccope.selected_ad;
}

在你选择的dom元素中：

<select ng-model="selected_ad" ng-options ='ad.value as ad.title for ad in ads' ng-click="changeSelection($event)">

那应该解决它。

Answer 2

由于您从ads数组（或对象）获取所有数据并且Angular可以跟踪数据更改，因此可以更改原始数据集以更新选项。例如，此函数将值增加10：

 $scope.switchAds = function () {
    $scope.ads.forEach(function (ad) {
      ad.value += 10;
    });
  };

Working example

使用AngularJS中的按钮迭代<option>值</option>

2 个答案: