Wie werden Checkboxen basierend auf dem Modell initialisiert?

Question

Ich schreibe meine erste nicht-tutorial angular.js Web-App. Ich verwende zwei Smart-Tables und ein Checklisten-Modell. Hier ist die erste, die ein st-safe-src von all_types verwendet, die ein Array von JSON-Objekte, die wie folgt aussehen ...

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

Hier ist der HTML für die Tabelle I verwenden diese Daten anzuzeigen:

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

Diese Tabelle sieht so aus, wenn ich Daten hineinlade. Die Kontrollkästchen werden aktiviert, damit sie mit den Daten aus meinem Modell übereinstimmen.

Aber wenn ich versuche, das gleiche in einer zweiten Chip Tabelle mit vollständigeren json Objekte zu tun, die wie folgt aussehen ...

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

Hier ist der HTML-I-Display bin mit zu diese Daten in einer Smart-Tabelle:

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

diese Tabelle sieht wie folgt aus, wenn ich Daten in sie zu laden:

Ich hatte gehofft, dass das Kontrollkästchen überprüft werden würde, aber sie werden nicht überprüft. Wenn diese Änderung vornehmen ...

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

... die richtigen Kontrollkästchen erhalten überprüft, aber nur der Titel veröffentlicht werden zu diesem Produkt. Was muss ich tun, damit die Kontrollkästchen aktiviert sind und die gesamten Produktdaten hochgeladen werden können?

ich ein Plunker Beispiel hinzugefügt haben: http://plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l

Answer 1

Sie als Checkliste-Wert verwenden, können die ID anstelle des Objekts als sagen Abschnitt über doc Array of objects (pick id)

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

Oder wenn Sie das Objekt als ausgewählte Produkte verwenden (checklist-value="x") Sie checklist-comparator verwenden müssen, weil in Ihrem Das ausgewählte Array und die vollständige Produktliste haben nicht die gleichen Referenzen. Der Komparator muss die gleichen Objekte mit _id vergleichen. Versuchen Sie diese

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

Answer 2

Nach sorgfältiger Prüfung Ihrer Frage zu lesen, und supossing, dass Sie das gleiche Verhalten wie die erste Smart-Tabelle wollen, das Problem, das ich glaube, Sie durch Einstellung der PRODUCT_TITLE gelöst werden hatte können als Checkliste-Wert des Eingabefeldes, etwa wie folgt:

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

Hier ist die plunkr assoziiert

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

Answer 3

Es gibt eine Option namens ng-true-value = "1". Dies wird mit den Werten des ng-Modells überprüft. Es funktioniert wie wenn (ng-Modell (Name) == 1). Probieren Sie es aus.

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

In diesem ist 1 der wahre Wert, den ich in der DB gespeichert habe. Es prüft also automatisch, ob der ng-Modellwert 1 enthält. Alles Gute.