angularjs - 以 Angular 获取选择元素的选定文本(不是值)

Question

例如我想做这样的事情:

<select ng-model="persons">
  <option value="person1">Anna Smith</option>
  <option value="person2">Karl Pettersson</option>
  <option value="person3">Ylvis Russo</option>
</select>
<p ng-view="persons"><p>

并且让 View 在下拉列表中选择时显示每个名称而不是它的值。是否可以？

我尝试观察模型并使用 jQuery 为新模型分配文本值。然而它最终变得很复杂，所以如果这是最好的方法，我的小例子会很棒!

Answer 1

您只需要定义您的 person 对象，然后您就可以用它做任何您想做的事情。有很多方法可以做到这一点...这是一个示例:

HTML

<select ng-model="persons"
    ng-options="p as p.label for p in persons">
</select>

<p ng-repeat="p in persons">
    {{p.value}}: {{p.label}}
</p>

JS

$scope.persons = [
    { value: 'person1', label: 'Anna Smith' },
    { value: 'person2', label: 'Karl Pettersson' },
    { value: 'person3', label: 'Ylvis Russo' }
];

这是一个jsfiddle:http://jsfiddle.net/bKHh8/

更新

这里的选项标签不使用 Angular 索引作为值(这正是回答你的问题):http://jsfiddle.net/bKHh8/1/

<select>
     <option ng-repeat="p in persons" value="{{p.value}}">{{p.name}}</option>
</select>