Come ottenere le caselle di controllo da inizializzare in base al modello?

Question

Sto scrivendo la mia prima app web angular.js non-tutorial. Sto usando due tabelle intelligenti e un modello di lista di controllo. Ecco il primo che utilizza una st-safe-src di all_types che è un array di oggetti JSON che assomigliano a questo ...

[ 
    { 
    "_id": "56417a9603aba26400fcdb6a", 
    "type": "Beer", 
    "__v": 0 
    }, 
    { 
    "_id": "56456140cb5c3e8f004f4c49", 
    "type": "Skiing", 
    "__v": 0 
    }, 
    ... 

Ecco il codice HTML per la tabella che uso per visualizzare questi dati:

<table st-table="displayedCollection" st-safe-src="all_types" class="table table-striped"> 
     <thead> 
      <tr> 
       <th st-sort="type">Types</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in displayedCollection"> 
       <td><input type="checkbox" checklist-model="vendor.types" checklist-value="x.type">{{x.type}}</td> 
      </tr> 
      <tr><td>id ({{curid}}) {{vendor.types}}</td></tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="5" class="text-center"> 
        <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div> 
       </td> 
      </tr> 
     </tfoot> 
    </table> 

Questa tabella ha questo aspetto quando carico i dati al suo interno. Le caselle di controllo vengono controllate per abbinare i dati del mio modello.

Ma quando cerco di fare la stessa cosa in una seconda tabella intelligente con oggetti JSON più completi che assomigliano a questo ...

[ 
    { 
    "_id": "569f047dd90a7874025b344e", 
    "product_title": "Plugs", 
    "product_img_001": "p001.jpg", 
    "product_img_002": "p002.jpg", 
    "product_vid_001": "bp.mov", 
    "__v": 0, 
    "product_sizes": [ 
     "Large", 
     "Med.", 
     "Small", 
     "10.5" 
    ], 
    "product_types": [ 
     "Running Shoe" 
    ] 
    }, 
    { 
    "_id": "569f3958b108a7d70201b89a", 
    "product_title": "Back Scratcher", 
    "product_img_001": "http://itchy.png", 
    "product_img_002": "http://relief-at-last.png", 
    "product_vid_001": "my-itch", 
    "__v": 0, 
    "product_sizes": [ 
     "Large" 
    ], 
    "product_types": [ 
     "Rocks" 
    ] 
    } 
] 

Ecco il codice html che sto usando per visualizzare questi dati in una tabella intelligente:

<table st-table="prodCollection" st-safe-src="all_products" class="table table-striped"> 
     <thead> 
      <tr> 
       <th st-sort="type">Products</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in prodCollection"> 
       <td><input type="checkbox" checklist-model="vendor.products" checklist-value="x">{{x.product_title}}</td> 
      </tr> 
      <tr><td>{{vendor.products}}</td></tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="5" class="text-center"> 
        <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div> 
       </td> 
      </tr> 
     </tfoot> 
    </table> 

questa tabella ha questo aspetto quando carico i dati in esso:

0.123.

Avevo sperato che la casella di controllo sarebbe stata controllata, ma non ottengono controllato. Se fanno di questo cambiamento ...

<td><input type="checkbox" checklist-model="vendor.products" checklist-value="x.product_title">{{x.product_title}}</td> 

... le caselle corrette vengono controllati, ma solo il titolo del prodotto saranno pubblicati. Che cosa devo fare per visualizzare le caselle di controllo visualizzate ed essere in grado di pubblicare i dati dell'intero prodotto?

Ho aggiunto un esempio plunker: http://plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l

Answer 1

È possibile utilizzare come lista di controllo a valore l'id anziché l'oggetto come dicono sezione doc Array of objects (pick id)

<input type="checkbox" checklist-model="vendor.products" checklist-value="x._id"> 

Oppure, se avete bisogno di usare l'oggetto come prodotti selezionati (checklist-value="x") è necessario utilizzare checklist-comparator perché nella vostra plunker l'array selezionato e l'elenco completo dei prodotti non hanno gli stessi riferimenti. Il comparatore deve corrispondere agli oggetti uguali di _id. Prova questo

<input type="checkbox" checklist-comparator="._id" checklist-model="vendor.products" checklist-value="prod" /> 

Answer 2

Dopo aver letto con attenzione la tua domanda, e supossing che si desidera lo stesso comportamento come la prima tabella intelligente, il problema credo che tu avessi possono essere risolti impostando il PRODUCT_TITLE come la lista di controllo-valore del campo di input, qualcosa di simile:

<input type="checkbox" checklist-model="vendor.products" checklist-value="prod.product_title" /> 

Qui il plunkr associato

http://plnkr.co/edit/5an1Fx?p=preview

Answer 3

C'è un'opzione chiamata ng-true-value = "1". Questo controllerà con i valori del modello ng. Funzionerà come se (ng-model (Name) == 1). Prova questo.

<input type="checkbox" name="checkbox_demo_4" id="checkbox_demo_4" 
    ng-model="temp.taxable_type" 
    ng-true-value="1" 
/> 

In questo, 1 è il valore vero che ho memorizzato nel DB. Quindi si verifica automaticamente se il valore del modello ng contiene 1. Tutto il meglio.