0

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

4

2 回答 2

3

您可能应该在 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的值将随之更改。

有关这方面的更多信息，请查看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
}
];

并添加控制器逻辑更改：

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

那应该解决它。

于 2013-09-05T06:23:27.010 回答
1

Since you get all the data from ads array (or object) and Angular can track data changes, it's possible to change original set of data in order to update options. For example, this function will increment values by 10:

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

Working example.

于 2013-09-05T06:35:05.170 回答