如何使用 AngularJS 获取选项文本值? [英] How to get option text value using AngularJS?
问题描述
我正在尝试使用 AngularJS 获取选项列表的文本值
这是我的代码片段
排序方式:<选择 ng-model="productList"><option value="prod_1">产品 1</option><option value="prod_2">产品 2</option></选择><p>订购者:{{productList}}</p>
{{productList}} 返回选项的值，例如:prod_1.我正在尝试获取文本值产品 1".有没有办法做到这一点?
最好的方法是在 select 元素上使用 ng-options 指令.
控制器
function Ctrl($scope) {//排序选项$scope.products = [{值:'prod_1'，标签:'产品 1'}, {值:'prod_2'，标签:'产品 2'}];}HTML
这会将选定的 product 对象绑定到 ng-model 属性 - selected_product.之后你可以使用这个:
Ordered by: {{selected_product.label}}
jsFiddle:http://jsfiddle.net/bmleite/2qfSB/
I'm trying to get a text value of an option list using AngularJS
Here is my code snippet
<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}} 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?
The best way is to use the ng-options directive on the select element.
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>
This will bind the selected product object to the ng-model property - selected_product. After that you can use this:
<p>Ordered by: {{selected_product.label}}</p>
jsFiddle: http://jsfiddle.net/bmleite/2qfSB/
这篇关于如何使用 AngularJS 获取选项文本值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
