AngularJS ng-modello converte oggetto stringa

Question

Ho la seguente nel mio file HTML:

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

I ListGroups contiene:

[ 
    { 
     "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" 
    } 
] 

Quando clicco un pulsante di scelta della listGroup (set in ng -model) diventa, per esempio:

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

Quando guardo listgroup con typeof $scope.listGroup, vedo che si tratta di un stringa ora!

Come tale, non posso accedere alle sue proprietà negli altri binding nel resto della pagina HTML.

In questo caso, voglio ng-show="listGroup.group == 'genre'"

Quello che sta succedendo qui e, cosa ancora più importante, come faccio a fargli fare quello che voglio fare, che è mantenere l'oggetto come un oggetto?

Grazie a tutti

Dave

Answer 1

Perché si vuole avere un oggetto come un modello ng? Questo è il motivo per cui la variabile listGroup diventa una stringa, poiché ng-model funziona solo con le stringhe. Se si dispone di un oggetto complesso che si desidera utilizzare con ng-modello, è necessario creare una direttiva e implementare un parser e un formattatore, come questo: How to do two-way filtering in angular.js?

Answer 2

Il problema è che l'attributo del entrata value accetta solo stringhe , non oggetti (controllare here). Quando si esegue questa operazione: value="{{ list }}", si sta essenzialmente facendo input.value = list.toString().

Una possibile soluzione consiste nell'utilizzare il $index della direttiva ng-repeat. Esempio: http://jsfiddle.net/bmleite/cKttd/

Answer 3

Ora è possibile utilizzare ng-value.

Esempio

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

Answer 4

Si potrebbe anche JSON.parse (oggetto-in-string), ma penso che mi piace @bmleite soluzione migliore. Basta lanciarlo là fuori - nel caso in cui qualcuno avesse un diverso caso d'uso.