javascript - 使用 AngularJS 中的按钮迭代 值

Question

我有一个<select>从 json 文件填充的元素:

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

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

例如...

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 中使用对象语法:

select as label for (key , value) in object

或者数组语法:

select as label for value in array

这将设置选项中的显示标签(您所看到的)和 ng-model 的值选项。

目前，当您使用数组中的值标签时，您仅设置选项的标签。假设您的数据模型 $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 种数据绑定(bind)方式，因此，如果您更改 $scope.ads 中的值，您的 select 元素的值将随之改变。

有关此内容的更多信息，请查看 http://docs.angularjs.org/api/ng.directive:select

编辑 - 如果您想在 ng-click 后更改实际值本身，您可以通过循环数据并将其增加 1 来实现(在这种情况下，更有意义)将值保留为整数。

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

编辑 2 - 只需更改您的数据集，如下所示:

$scope.selected_ad = 1;

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

并添加 Controller 逻辑更改:

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

这应该可以解决问题。