AngularJS：动态 ng-bind 属性

Question

我正在使用 select2 执行指令。在我的屏幕上我会有很多 select2 个对象，所以这就是为什么我想使用一个可以多次重复使用的指令。

这是指令：

<div class='form-group'>
<p>{{title}}</p>
<ui-select ng-model="selectedItem" on-select="onChange($item);" theme="bootstrap">
    <ui-select-match placeholder="{{placeholder}}">
        {{selectedItem.state}}
    </ui-select-match>

    <ui-select-choices repeat="item in items | filter: $select.search">
        <span ng-bind="item.state"></span>
    </ui-select-choices>
</ui-select>

然后我可以这样做来传递我的 index.html 文件中的参数：

<strainer-select
                    items="strainer.states"
                    selectedItem="strainer.selectedState"
                    handler="onStateChange"
                    title="Estados"
                    placeholder="Escolha um Estado"
                ></strainer-select>

我的问题是：在 select2 中，我需要将我的对象的属性通知给 "bind" 并显示在视图中，如下所示：

{{selectedItem.state}}

但是，当然，属性 'state' 并非在所有对象中都可用。如果我有一个 "city" 对象，它可以是 "cityName" 或者如果我想要显示用户，它可以只是 "name" 或 "userName".

我想避免制作拦截器并修改我的所有数据以复制属性，以适应数据中的通用 "name"。如果我的对象是：

{
    state: "Sao Paulo",
    uf: "SP"
}

我不想将其更改为：

 {
    state: "São Paulo",
    uf: "SP",
    name: "São Paulo" // replicated from "state" property
}

只能在我的指令中使用。

所以，我尝试将绑定属性名称动态传递给指令，如下所示：

 <strainer-select
                    items="strainer.states"
                    selectedItem="strainer.selectedState"
                    handler="onStateChange"
                    title="Estados"
                    placeholder="Escolha um Estado"
                    bindName="state"
                ></strainer-select>

并像这样在指令中使用它：

<span ng-bind="item.{{bindName}}"></span> // didnt work
<span ng-bind="item[{{bindName}}]"></span> // didnt work
<span ng-bind="item['{{bindName}}']"></span> // didnt work

ui-select-匹配看起来最差....

<ui-select-match placeholder="{{placeholder}}">
    {{selectedItem["{{bindName}}"]}} // didnt work
</ui-select-match>

但没有成功。

有人知道如何动态更改 ng-bind 使用的属性名称吗？

谢谢。

Answer 1

尝试

<span ng-bind="item[bindName]"></span>

<ui-select-match placeholder="{{placeholder}}">
    {{selectedItem[bindName]}}
</ui-select-match>

虽然在 ng-bind 中，您不需要避免使用您正在编写原始代码的变量 - 因此您需要引用和直接使用字符串。

AngularJS：动态 ng-bind 属性

AngularJS: dynamic ng-bind property

angularjs

angularjs-select2