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

一尘不染

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

angularjs

我正在尝试使用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”。有没有办法做到这一点？

阅读 259

2020-07-04

共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/

2020-07-04