如何在角度js中从关联数组创建多个复选框

时间:2022-07-06 13:27:52
Hello I am Posting 3rd time my question for checkbox.
Fully code and response on this question which I have posted already.
I have created fiddle of my data. 
I am getting broken data please check my fiddle.

Please test my json may be there is problem. I want to create check box using dietry_reqs data. http://jsfiddle.net/ashishoft/03L3faq5/2/

请测试我的json可能有问题。我想使用dietry_reqs数据创建复选框。 http://jsfiddle.net/ashishoft/03L3faq5/2/

Please please help me :(

2 个解决方案

#1


0  

First: your dietry_reqs is a string not an iterable object:

首先:你的dietry_reqs是一个不是可迭代对象的字符串:

fixed:

"dietry_reqs": [{"id":1,"name":"delhi","value":false},{"id":2,"name":"mumbai","value":false},{"id":3,"name":"ahmedabad","value":false}],

And the checkboxes:

和复选框:

<li ng-repeat="(key, value) in thing.dietry_reqs">
    <input type="checkbox" ng-model="value.value"> | {{value.name}} => {{value.value}}
</li>

Check it: http://jsfiddle.net/pz2f2k39/

检查一下:http://jsfiddle.net/pz2f2k39/

Also: official docs

另外:官方文档

#2


0  

I think you're looking for something like this:

我想你正在寻找这样的东西:

var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
  $scope.things = {
    "attendance": [{
      "id": "14",
      "event_booking_id": "32",
      "seat_type": "",
      "fname": "",
      "lname": "",
      "email": "",
      "company": "",
      "dietry_reqs": [{
        "id": 1,
        "name": "delhi",
        "value": true
      }, {
        "id": 2,
        "name": "mumbai",
        "value": false
      }, {
        "id": 3,
        "name": "ahmedabad",
        "value": false
      }],
      "attend_status": "0",
      "created": "2016-05-05 11:24:56"
    }]
  }
});
<div ng-app="Demo">
  <ul>
    <li ng-repeat="a in things.attendance">
      <ul>
        <li ng-repeat="dr in a.dietry_reqs">
          <input type="checkbox" ng-model="dr.value" />{{ dr.name }}
        </li>
      </ul>
    </li>
  </ul>
</div>

Let me know. Thanks.

让我知道。谢谢。

#1


0  

First: your dietry_reqs is a string not an iterable object:

首先:你的dietry_reqs是一个不是可迭代对象的字符串:

fixed:

"dietry_reqs": [{"id":1,"name":"delhi","value":false},{"id":2,"name":"mumbai","value":false},{"id":3,"name":"ahmedabad","value":false}],

And the checkboxes:

和复选框:

<li ng-repeat="(key, value) in thing.dietry_reqs">
    <input type="checkbox" ng-model="value.value"> | {{value.name}} => {{value.value}}
</li>

Check it: http://jsfiddle.net/pz2f2k39/

检查一下:http://jsfiddle.net/pz2f2k39/

Also: official docs

另外:官方文档

#2


0  

I think you're looking for something like this:

我想你正在寻找这样的东西:

var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
  $scope.things = {
    "attendance": [{
      "id": "14",
      "event_booking_id": "32",
      "seat_type": "",
      "fname": "",
      "lname": "",
      "email": "",
      "company": "",
      "dietry_reqs": [{
        "id": 1,
        "name": "delhi",
        "value": true
      }, {
        "id": 2,
        "name": "mumbai",
        "value": false
      }, {
        "id": 3,
        "name": "ahmedabad",
        "value": false
      }],
      "attend_status": "0",
      "created": "2016-05-05 11:24:56"
    }]
  }
});
<div ng-app="Demo">
  <ul>
    <li ng-repeat="a in things.attendance">
      <ul>
        <li ng-repeat="dr in a.dietry_reqs">
          <input type="checkbox" ng-model="dr.value" />{{ dr.name }}
        </li>
      </ul>
    </li>
  </ul>
</div>

Let me know. Thanks.

让我知道。谢谢。