AngularJS: dynamische ng-bind-Eigenschaft

Question

Ich mache eine Anweisung mit select2. In meinem Bildschirm werde ich viele select2-Objekte haben, deshalb möchte ich eine Direktive verwenden, die ich oft wiederverwenden kann.

Dies ist die Richtlinie:

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

Mein Problem ist: in select2 I

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

Dann kann ich dies tun, um die Parameter in meiner Datei index.html geben muss eine Eigenschaft meines Objekts informieren, um zu "binden" und in der Ansicht wie folgt angezeigt werden:

{{selectedItem.state}} 

Aber natürlich ist die Eigenschaft 'state' nicht in allen Objekten verfügbar. Wenn ich ein "Stadt" -Objekt habe, kann es "cityName" sein, oder wenn ich Benutzer anzeigen möchte, könnte es nur "name" oder "userName" sein.

Ich möchte vermeiden, einen Interzeptor zu machen und alle meine Daten zu replizieren, Eigenschaften nur zu einem generischen "Namen" in den Daten zu replizieren. Wenn mein Objekt ist:

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

Ich will es nicht ändern:

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

jus in meiner Richtlinie zu verwenden.

Also, ich habe versucht, übergeben Sie die bind Eigenschaftsnamen dynamisch an die Richtlinie wie folgt aus:

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

Und es in der Richtlinie wie folgt verwenden:

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

Und der ui-select -matsch sieht am schlechtesten aus ....

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

aber ohne Erfolg.

Hat jemand eine Ahnung, wie ich den von ng-bind verwendeten Eigenschaftsnamen dynamisch ändern kann?

Vielen Dank.

Answer 1

Versuchen

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

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

Während in ng-bind Sie brauchen nicht die Verwendung von Variablen zu entkommen Sie rohen Code schreiben - also warum Sie Verwendungen von Strings zu zitieren und direkte benötigen.