logo标签列表

如何根据模型获取复选框的初始值？

javascriptangularjsjsonsmart-tablechecklist-model
7
我正在编写我的第一个非教程angular.js网络应用程序。我使用了两个smart-tables和checklist-model。这是第一个使用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>

当我加载数据到这个表格时，它看起来像这样。复选框被选中以匹配我的模型中的数据。

enter image description here

但是，当我尝试在第二个智能表格中执行相同操作时，使用的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>

当我加载数据到这个表中时，它看起来像这样：

enter image description here

我原本希望复选框被选中，但它们没有被选中。 如果进行以下更改...

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

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

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

你试图将一个对象分配给复选框中的真/假值。x是列表中的一个对象，你需要x的属性，比如x.checked或类似的属性。很抱歉这不是一个解决方案，但也许你可以考虑一下解决方案。 - Byren Higgin
你的 Plunkr 示例对我完全没有用。很可能 x 不等于任何一个 vendor.products - 可能是不同的属性？ - Adrian Ber
抱歉...我已经修复了Plunker http://plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l - Red Cricket
你说的“发布整个产品数据”是什么意思？如果你指的是表单提交，那么你不能提交整个JSON对象，只能提交字符串。 - Adrian Ber
抱歉，我也是Plunkr的新手。这是正确的URL：http://plnkr.co/edit/8CJ3Xh?p=info。 - Red Cricket
嗨，Adrian Ber，很抱歉这么久才回复你。我的应用程序的另一个部分可以提交整个JSON对象。这是一个演示它的plunker http://embed.plnkr.co/wd87StROz8Yi5dUq3Nt1/ 如果您能看一下并让我知道我在原始问题中做错了什么，谢谢！ - Red Cricket
3个回答
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。

祝一切顺利。
谢谢回复，但添加 ng-true-value="1" 似乎没有改变任何东西。 - Red Cricket
@RedCricket 嘿，老兄，我刚看了你的 Plunkr 示例。我无法在复选框字段中看到“true”值。尝试使用 ng-true-value 并将其设置为 true 值。 - Pravinraj Venkatachalam
2
你可以使用id作为检查表的值，而不是像文档中所说的对象（选取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" />
谢谢回复，但我已经尝试使用以下代码：<input type="checkbox" checklist-model="vendor.products" checklist-value="prod._id" /> 在我的plunkr中：http://plnkr.co/edit/8CJ3Xh?p=info 但是没有起作用。 - Red Cricket
使用 checklist-comparator 分支的 plunkr：http://plnkr.co/edit/N1MN8d?p=preview - pdorgambide
你是怎么发现的？我在清单模型文档中可能错过了“checklist-comparator”？ - Red Cricket
是的，在使用部分，它就在readme.md中https://github.com/vitalets/checklist-model。 - Red Cricket
1
阅读了您的问题后，假设您想要与第一个智能表格相同的行为，我认为您遇到的问题可以通过将产品标题设置为复选框输入字段的值来解决，例如：
 <input type="checkbox" checklist-model="vendor.products" checklist-value="prod.product_title" />

这里是相关的 Plunkr：

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

当单击“编辑”按钮时，我希望“插头”和“背部刮痒器”的复选框被选中。 - Red Cricket
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接