Question

我想为angularJS下拉列表设置不同的文本/值。目前，使用以下语法，文本和值都相同：

<select name="flightNum" class="form-control" ng-model="model.flight"
       ng-options="v.Value as v.Text for v in flights" required></select>

我试过这种方法：

<select name="flightNum" class="form-control" ng-model="model.flight" 
          ng-options="v.Value as v.Text for v in flights" required>
    <option ng-repeat="v in flights" value="{{v.Value}}"> {{v.Text}}</option>
</select>

但是我有相同的文字/价值组合。知道我需要更改什么才能使用angularJS吗？

提前致谢，Laziale

Answer 1

只要你的$ scope.flights设置正确，你展示的第一个语法就可以了。我已经设置了一个plunker来在http://plnkr.co/edit/PIXZZO81aQKj4kmngoXy?p=preview

显示这个

$ scope.flights具有以下数据结构：

  $scope.flights = [{
    value: 'val1',
    text: 'text1'
  }, {
    value: 'val2',
    text: 'text2'
  }, {
    value: 'val3',
    text: 'text3 '
  }]

然后，select可以基本上按照你的方式编写（我在意外时使用了小写值和文本，但只是确保它在控制器和html之间匹配）：

<select name="flightNum" class="form-control" ng-model="model.flight" ng-options="v.value as v.text for v in flights" required></select>

使用此设置，下拉列表将填充“text”字段中包含的值，但选择某些内容会将“value”设置为model.flight变量。您可以在上面提到的Plunker中看到这一点。

这是你想要的行为吗？如果不是，发生了什么不同/意外？

Answer 2

您需要在ng-options

中添加曲目

<select name="flightNum" class="form-control" ng-model="model.flight"
       ng-options="v.Value as v.Text for v in flights track by v.Value" required>
</select>

那就是它。

使用angularjs为下拉列表设置不同的文本/值

2 个答案: