如何使用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.我正在尝试获取文本值'Product 1'.有没有办法做到这一点？

Answer 1

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

调节器

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对象绑定到ng-model属性 - selected_product.之后你可以使用这个:

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

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

Answer 2

ng-options="product as product.label for product in products">您可以使用以下代码而不是select元素:

<option ng-repeat="product in products" value="{{product.label}}">{{product.label}}

哪个也很好用.

Answer 3

你也可以这样做:

<select class="form-control postType" ng-model="selectedProd">
    <option ng-repeat="product in productList" value="{{product}}">{{product.name}}</option>
</select>

其中"selectedProd"将被选中产品.