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中我需要通知我的对象属性＆＃34; bind＆＃34;并显示在视图中，如下所示：

{{selectedItem.state}}

但是，当然，财产状况＆＃39;将无法在所有对象中使用。如果我有一个城市＆＃34;对象它可以是＆＃34; cityName＆＃34;或者，如果我想要显示用户，它可能只是＆＃34; name＆＃34;或＆＃34; userName＆＃34;。

我想避免制作一个拦截器并修改我的所有数据来复制属性只是为了适应一般的＆＃34;名称＆＃34;在数据中。如果我的目标是：

{
    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-match看起来很糟糕......

<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属性

1 个答案: