Question

我想添加带有选项AM，PM和angularjs的html选择，我需要的是拥有密钥和选项的价值是相同的：

<option value="AM">AM</option>
<option value="PM">PM</option>

我的HTML看起来像这样

<select ng-model="ampm" ng-options="k as v for (k , v) in ampms"></select>

我的控制器看起来像

  $scope.ampm = (new Date().getHours()) >= 12 ? 'PM' : 'AM';
  $scope.ampms ={"AM":"AM","PM":"PM"};

并且每件事情都很好。

我的问题是为什么当我使用数组时我不能拥有相同的东西（我尝试了ng-options中的所有选项）就像这个

$scope.ampms =["AM","PM"];

我做什么我总是得到这个

<option value="0">AM</option>
<option value="1">PM</option>

我想要的是使用如上所示的数组，选项具有键和值相同。

Answer 1

使用AngularJS，您无需担心选项的价值。我在ng-options看到的所有选择的值都是0到0。如果您只是想要使用这两个选项的下拉列表，它可以像

一样简单

<select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']"></select>

请参阅http://jsfiddle.net/EyBVN/1/

Answer 2

这是Angular中ng-options的默认行为。如果未指定键名，angular将自动选择使用索引而不是键。可以在line 405 in /src/ng/directives/select.js on Angular's Github repository上看到执行该操作的代码。

它甚至不能被“值作为值中的（索引，值）值”。

但是因为dnc253只是用他的答案击败了我（当我打字时它出现了）......你不必担心它，Angular会自动为你做这一切。

Answer 3

我确实找到了一种方法，可以将特定数据放在select的选项值中。您必须在选择标记内的选项标记中添加ng-repeat属性：

<select id="{{question.id}}" name="{{question.id}}" 
    class="{{question.inputclass}}" ng-required="question.required" 
    title="{{question.title}}">
  <option value=""></option>
  <optgroup ng-repeat="group in question.data" label="{{group.group}}">
    <option ng-repeat="item in group.data" value="{{item.value}}" 
        ng-selected="{{item.value == question.defaultValue}}">
          {{item.description}}
    </option>
  </optgroup>
</select>

作为奖励，我留下了选项组标签，以作为每个人的榜样。

question.data JSON是：

[
  {"group":"Canada","data":[{"value":"Ontario","description":"Toronto"},
                            {"value":"Quebec","description":"Quebec City"},
                            {"value":"Manitoba","description":"Winnipeg"}
                           ]
  },
  {"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"},
                            {"value":"Nayarit","description":"Tepic"}
                           ]
  },
  {"group":"United States of America","data":[
                            {"value":"Alabama","description":"Montgomery"},
                            {"value":"Georgia","description":"Atlanta"},
                            {"value":"Mississippi","description":"Jackson"},
                            {"value":"Louisiana","description":"Baton Rouge"},
                            {"value":"Texas","description":"Ausint"}
                           ]
  }
]

带阵列的Angularjs ng选项

3 个答案: