迭代<选项>AngularJS中带有按钮的值

Iterate <option> value with button in AngularJS

本文关键字：按钮 AngularJS lt 选项 gt 迭代      更新时间：2023-09-26

我有一个<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，它可以循环遍历每个元素并动态更改所选选项？我已经玩了一段时间了，在文档中找不到任何相关的东西。

您可能应该在ng选项中使用Object语法之一：

select as label for (key , value) in object

或者数组语法：

select as label for value in array

这将设置选项中的显示标签（您所看到的）和ng模型的值选项。

当前，当您使用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有双向数据绑定，因此如果您更改$scope.ads中的值，select元素的值也会随之更改。

有关此的更多信息，请结账http://docs.angularjs.org/api/ng.directive:select

编辑-如果你想在点击ng后更改实际值，你可以通过循环数据并将其递增1来完成（在这种情况下，将值保留为整数更有意义。

如果你只想有一个按钮来选择某个选项（比如说使用输入框中的ng模型），你可以通过更改选择ng模型来实现，即：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)">

这应该可以解决问题。

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

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

工作示例。

相关文章：