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

Question

我正在编写我的第一个 non-tutorial angular.js 网络应用程序。我正在使用两个 smart-tables 和 checklist-model。这是第一个使用 all_types 的 st-safe-src 的数组，它是 json objects 的数组，看起来像这样 ...

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

这是 html 我用来显示此数据的 table：

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

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

但是当我尝试在第二个智能 table 中做同样的事情时，更完整的 json objects 看起来像这样...

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

这是我用来在智能 table 中显示此数据的 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>

当我向其中加载数据时，table 看起来像这样：

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

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

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

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

Answer 1

仔细阅读你的问题后，假设你想要与第一个聪明人相同的行为table，我认为你遇到的问题可以通过以下方式解决将 product_title 设置为输入字段的清单值，如下所示：

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

这里是关联的 plunkr

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

Answer 2

有一个名为 ng-true-value="1" 的选项。这将检查 ng-model 的值。它会像 if(ng-model(Name) == 1) 一样工作。试试这个。

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

其中，1是我存储在数据库中的真实值。所以它会自动检查 ng-model 值是否包含 1。祝一切顺利。

Answer 3

您可以使用 id 而不是 Object as say doc 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" />

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

How to get checkboxes to initialize based on model?

javascript

angularjs

json

smart-table

checklist-model