如何在AngularJS中选择选项中的文本格式？答案

【问题标题】：How to format text in options for select in AngularJS?如何在AngularJS中选择选项中的文本格式？
【发布时间】：2014-01-24 20:45:37
【问题描述】：

我有以下 json 对象：

$scope.values = [
        {
            "id": 2,
            "code": "Code 1",
            "name": "Sample 1"
        },
        {
            "id": 4,
            "code": "Code 2",
            "name": "Sample 2"  
        },
        {
            "id": 7,
            "code": "Code 3",
            "name": "Sample 3"
        }
    ];

在选择标签中，我有这个：

<select name="c_id" ng-options="c.id as c.code for c in values"></select>

生成的选择选项是：

Code 1
Code 2
Code 3

有没有办法在如下选项中格式化文本？

Code 1 -- Sample 1
Code 2 -- Sample 2
Code 3 -- Sample 3

或者我只需要在将它们附加到模型之前准备好这些值？任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： javascript json angularjs

【解决方案1】：

您可以使用以下语法来做到这一点：

ng-options="c.id as (c.code + ' -- '+ c.name) for c in values"

示例：http://jsfiddle.net/cherniv/6EkL7/1/

或者有人可能喜欢下一个语法：

ng-options="c.id as [c.code,c.name].join(' -- ') for c in values"

示例：http://jsfiddle.net/cherniv/6EkL7/2/

但在某些情况下使用 Filter 是合理的，例如：

app.filter("formatter",function(){
    return function(item){
        return item.code+ " -- " + item.name;
    }
})

还有：ng-options="c.id as c|formatter for c in values"

例如：http://jsfiddle.net/cherniv/K8572/

【讨论】：

实现这一目标的好方法。格特！
@AshishKumar ，是的，Angular 太棒了！
你刚刚让我意识到'as'子句可以是一个方法，就像'for'子句一样，例如“foo as barize(foo) for activeFoos()”。谢谢你。不确定我是否会做这样的事情，但 G.I.我内心的乔很高兴知道这一点。
这是一个很棒的答案。谢谢哥们..!!
最后一个帮助我提供了链接。谢谢！ +1

【解决方案2】：

当然，您可以通过为 option 调用 ng-repeat 来实现，

HTML

   <select> 
        <option ng-repeat="v in values" value="{{v.id}}">
          {{v.code}} -- {{v.name}}
        </option>
    </select>

一样

演示Fiddle

【讨论】：