angularjs - 如何使用 AngularJS 获取选项文本值？

Question

我正在尝试使用 AngularJS 获取选项列表的文本值

这是我的代码片段

<div class="container-fluid">
        Sort by:
        <select ng-model="productList">
            <option value="prod_1">Product 1</option>
            <option value="prod_2">Product 2</option>
        </select>
</div>

<p>Ordered by: {{productList}}</p>

{{productList}} 返回选项的值，例如:prod_1。我正在尝试获取文本值“产品 1”。有办法做到这一点吗？

Answer 1

最好的方法是在 select 元素上使用 ng-options 指令。

Controller

function Ctrl($scope) {
  // sort options
  $scope.products = [{
    value: 'prod_1',
    label: 'Product 1'
  }, {
    value: 'prod_2',
    label: 'Product 2'
  }];   
}

HTML

<select ng-model="selected_product" 
        ng-options="product as product.label for product in products">           
</select>

这会将选定的 product 对象绑定(bind)到 ng-model 属性 - selected_product。之后你可以使用这个:

<p>Ordered by: {{selected_product.label}}</p>

jsFiddle:http://jsfiddle.net/bmleite/2qfSB/