AngularJS ng-Modell konvertiert Objekt String

Question

Ich habe folgendes in meiner HTML-Datei:

<td style="width: 200px;"> 
     <span ng-repeat="list in listGroups"> 
      <label for="{{ list.description }}" />{{ list.description }}</label> 
      <input ng-model="$parent.listGroup" id="listGroup-{{ list.value }}" name="listGroups" value="{{ list }}" type="radio" /> 
     </span> 
    </td> 

Die Listgroups enthalten:

[ 
    { 
     "description": "New by Territory", 
     "group": "product", 
     "type": "new" 
    }, 
    { 
     "description": "New by Genre", 
     "group": "genre", 
     "type": "new" 
    }, 
    { 
     "description": "Charts by Territory", 
     "group": "product", 
     "type": "chart" 
    }, 
    { 
     "description": "Charts by Genre", 
     "group": "genre", 
     "type": "chart" 
    } 
] 

Wenn ich auf ein Optionsfeld der listgroup (set in ng -Modell) wird, zum Beispiel:

{"description":"New by Genre","group":"genre","type":"new"} 

Wenn ich mit Blick listgroup typeof $scope.listGroup, ich sehe, dass es sich um eine Schnur jetzt!

Als solche kann ich nicht auf die Eigenschaften in den anderen Bindungen im Rest der HTML-Seite zugreifen.

In diesem Fall möchte ich ng-show="listGroup.group == 'genre'"

Was hier und, was noch wichtiger ist passiert, wie kann ich es tun, was ich es tun möchten, welche das Objekt als ein Objekt halten?

Dank all

Dave

Answer 1

Warum wollen Sie ein Objekt als ng-Modell haben? Dadurch wird Ihre listGroup-Variable zu einer Zeichenfolge, da ng-model nur mit Zeichenfolgen funktioniert. Wenn Sie ein komplexes Objekt, das Sie mit ng-Modell verwenden möchten, sollten Sie eine Richtlinie erstellen und einen Parser und einen Formatierer implementieren, wie folgt aus: How to do two-way filtering in angular.js?

Answer 2

Das Problem ist, dass die einzige value Attributs Input akzeptiert Strings , nicht Objekte (überprüfen Sie here). Wenn Sie dies tun: value="{{ list }}", Sie tun im Grunde input.value = list.toString().

Eine mögliche Problemumgehung besteht darin, die $index der ng-repeat Direktive zu verwenden. Beispiel: http://jsfiddle.net/bmleite/cKttd/

Answer 3

Es ist jetzt möglich, ng-value zu verwenden.

Beispiel

<input ng-model="$parent.listGroup" id="listGroup-{{ list.value }}" name="listGroups" ng-value="{{ list }}" type="radio" />

Answer 4

Sie auch JSON.parse (Objekt-in-string) könnte, aber ich denke, Ich mag @bmleite Lösung besser. Wirf es einfach raus - wenn jemand einen anderen Anwendungsfall hat.