javascript - 如何让复选框根据模型进行初始化？

Question

我正在编写我的第一个非教程 angular.js 网络应用程序。我正在使用两个智能表和 list 模型。这是第一个使用 all_types 的 st-safe-src 的，它是一个 json 对象数组，看起来像这样......

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

这是我用来显示此数据的表格的 html:

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

当我向其中加载数据时，该表看起来像这样。选中复选框以匹配来 self 的模型的数据。

但是当我尝试在第二个智能表中使用更完整的 json 对象(看起来像这样)做同样的事情时......

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

这是我用来在智能表格中显示此数据的 html:

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

当我向其中加载数据时，该表看起来像这样:

我曾希望复选框会被选中，但它们没有被选中。如果进行此更改...

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

...正确的复选框被选中，但只会发布产品的标题。我需要做什么才能让复选框显示为选中状态并能够发布整个产品数据？

我添加了一个 plunker 示例:http://plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l

Answer 1

您可以将 id 用作 list 值而不是 Object as say 文档 Array of objects (pick id) 上的部分

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

或者，如果您需要将对象用作选定产品 (checklist-value="x")，则需要使用 checklist-comparator，因为在您的 plunker 中，选定的数组和完整的产品列表没有相同的引用。比较器必须通过 _id 匹配相等的对象。试试这个

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