如何使用AngularJS获取选项的文本值？ [英] How to get option text value using AngularJS?

问题描述

我试图让使用AngularJS一个选项列表的文本值

I'm trying to get a text value of an option list using AngularJS

下面是我的code段

<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。有没有办法做到这一点？

{{productList}} returns the value of the option, eg: prod_1. I'm trying to get the text value 'Product 1'. Is there a way to do this?

推荐答案

最好的办法是给我们上的选择 NG-选项指令元素。

The best way is to us the ng-options directive on the select element.

在您的控制器：

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

在你的HTML：

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

这将绑定所选的产品的对象到 NG-模型属性 - 产品的。之后，你可以使用这个：

This will bind the selected product object to the ng-model property - productList. After that you can use this:

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

的jsfiddle ： http://jsfiddle.net/bmleite/2qfSB/

这篇关于如何使用AngularJS获取选项的文本值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！