Question

以下是我的选择框

<select ng-model="colour" ng-options="c.id as c.name for c in colors" ng-init="colour=2">
    <option value="">--Select Colour--</option>
</select>

以下是控制器中的代码

$scope.colors = [
    {id: 1, name: 'black', shade: 'dark'},
    {id: 2, name: 'white', shade: 'light'},
    {id: 3, name: 'red', shade: 'dark'},
    {id: 4, name: 'blue', shade: 'dark'},
    {id: 5, name: 'yellow', shade: 'light'}
];

在此选择中，仅显示颜色的名称，我的要求是在选项文本中显示名称和阴影。我试过但没有运气，也没有找到任何有用的帖子来做这件事。

任何人都有想法在选择选项文本（编辑，black dark）中显示名称和阴影。

Answer 1

您可以将阴影附加到表达式中的名称：

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

Fiddle

Answer 2

您必须更新ng-options表达式例如：

c.id as c.name + ' ' + c.shade for c in colors

Answer 3

我找到了另外一种方法

<div ng-app='MyModule' ng-controller="MyController">
    <select ng-model="colour">
        <option value="">--Select Client--</option>
        <option ng-value="c.id" ng-selected="c.id==11"
            ng-repeat="c in colors">{{c.name + ' ' + c.shade}}</option>
    </select>

    <p>You have selected colour: {{colour}}</p>
</div>

Fiddle

在选择选项中显示两个属性组合

3 个答案: