1. casa
  2. Domanda e risposta
  3. Come si ottengono le checkbox da associare ai valori booleani nel mio modello dati?

Come si ottengono le checkbox da associare ai valori booleani nel mio modello dati?

2013-04-27 9 views
16

Ho sfogliato domande simili per un paio d'ore, ma non ho trovato nulla che corrisponda esattamente. Quello che voglio fare è far controllare automaticamente una casella di controllo tramite l'associazione dei dati a un valore vero/falso nei miei dati. Posso ottenere i nomi degli oggetti per caricare senza problemi, e posso anche tirare i valori della casella di controllo in seguito per il salvataggio sul server, ma non riesco a caricare correttamente i valori iniziali.Come si ottengono le checkbox da associare ai valori booleani nel mio modello dati?

Ecco un esempio ridotto che mostra il problema fondamentale; HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
<script src="shoppingListNg.js"></script> 
<body ng-app> 
<div ng-controller="ShoppingListCtrl"> 
    <table> 
     <tr ng-repeat="item in shoppingList"> 
      <td> 
       <div>{{item.text}}</div> 
      </td> 
      <td> 
       <input type="checkbox" ng-model="item.isGotten" /> 
      </td> 
     </tr> 
    </table> 
</div> 
</body>

Ed ecco il Javascript:

function ShoppingListCtrl($scope) { 
    $scope.shoppingList = [ 
     { 
     "text": "V8 fusion", 
     "isGotten": "true" 
     }, 
     { 
     "text": "Whole milk container", 
     "isGotten": "false" 
     }, 
     { 
     "text": "Protein bars", 
     "isGotten": "true" 
     } 
    ]; 
};

Qualsiasi idea del perché non riesco a ottenere quelle caselle di controllo a rispettare i "veri" e "falsi" i valori del modello? Si mostrano sempre deselezionati ogni volta che la pagina viene caricata. Devo usare ng-checked o una direttiva diversa?

fonte

2013-04-27 paradigm72

risposta

17

Il problema è che si hanno "vero" e "falso" tra virgolette, il che rende le stringhe al posto dei booleani a cui Angular può associare la casella di controllo.

Se si rimuovono le virgolette come segue, il codice funzionerà correttamente. Un esempio funzionante è http://plnkr.co/edit/gkchmOBTkBtVv3TijlZW.

function ShoppingListCtrl($scope) { 
    $scope.shoppingList = [ 
     { 
     "text": "V8 fusion", 
     "isGotten": true 
     }, 
     { 
     "text": "Whole milk container", 
     "isGotten": false 
     }, 
     { 
     "text": "Protein bars", 
     "isGotten": true 
     } 
    ]; 
};

fonte

2013-04-27 18:22:57 mikel

+0

Ma questo non funziona per i pulsanti di opzione sai come farlo per i pulsanti di opzione – Xvegas

7

A seconda dei dati, è possibile che non si desideri il puro vero/falso nel codice. AngularJS valuta comunque i valori true/false e i booleani 1/0 nelle stringhe, quindi è meglio usare le stringhe.

In questa codepen uso "1" e "0" per valori booleani, e ngTrueValue e ngFalseValue per dire ad AngularJS come mantenere intatti i binding. Molto semplice e pulito.

Codepen qui: http://codepen.io/paulbhartzog/pen/kBhzn

Snippet di codice:

<p ng-repeat="item in list1" class="item" id="{{item.id}}"> 
    <strong>{{item.id}}</strong> <input name='obj1_data' type="checkbox" ng-model="list1[$index].data" ng-true-value="1" ng-false-value="0"> Click this to change data value below 
</p> 
<pre>{{list1 | json}}</pre>

fonte

2014-05-20 20:04:57

Problemi correlati

 Problemi correlati