Dynamic form using AngularJS, multiple values binding -

i looking best approach convert static form angular dynamic form. not sure how bind multiple values same answer.

the static page available at: https://jsfiddle.net/hvuq5h46/

<div ng-repeat="i in items">      <select ng-model="i.answer" ng-options="o.id o.title o in i.answersavailable" ng-visible="y.type = 'single'"></select>      <input type="checkbox" ng-model="i.answer" ng-visible="y.type = 'multiple'" /> </div> 

the json file

[   {     "id": 1,     "title": "are student?",     "type": "single",     "answersavailable": [       {         "id": 1,         "title": "yes"       },       {         "id": 2,         "title": "no"       }     ],     "answer": [       1     ]   },   {     "id": 2,     "title": "would astronaut?",     "type": "single",     "answersavailable": [       {         "id": 4,         "title": "yes"       },       {         "id": 5,         "title": "no"       },       {         "id": 6,         "title": "i not sure"       }     ],     "answer": [       4     ]   },   {     "id": 3,     "title": "what favourite planet?",     "type": "multiple",     "answersavailable": [       {         "id": 7,         "title": "earth"       },       {         "id": 8,         "title": "mars"       },       {         "id": 9,         "title": "jupiter"       }     ],     "answer": [       7,       8     ]   } ] 

things simpler if can use multiple select, understand might difficult user interact (consider md-select, transforms multiple select list of checkbox you)

multiple select:

<select multiple   ng-model="i.answer"   ng-options="o.id o.title o in i.answersavailable"   ng-if="i.type == 'multiple'"></select> 

anyway ok use html checkbox. need bind checkbox model data usual, , update answer array simultaneously.

ng-model="o.selected"

ng-change="updateanswer(i)"

also, we'll need copy existing data model during init.

ng-init="initmultiple(i)"

working code:

angular.module('test', []).controller('test', test);    function test($scope) {    $scope.items = [{        "id": 1,        "title": "are student?",        "type": "single",        "answersavailable": [{            "id": 1,            "title": "yes"          },          {            "id": 2,            "title": "no"          }        ],        "answer": [          1        ]      },      {        "id": 2,        "title": "would astronaut?",        "type": "single",        "answersavailable": [{            "id": 4,            "title": "yes"          },          {            "id": 5,            "title": "no"          },          {            "id": 6,            "title": "i not sure"          }        ],        "answer": [          4        ]      },      {        "id": 3,        "title": "what favourite planet?",        "type": "multiple",        "answersavailable": [{            "id": 7,            "title": "earth"          },          {            "id": 8,            "title": "mars"          },          {            "id": 9,            "title": "jupiter"          }        ],        "answer": [          7,          8        ]      }    ]        $scope.initmultiple = function(item) {      item.answersavailable.foreach(function(option) {        option.selected = item.answer.indexof(option.id) != -1;      });    }        $scope.updateanswer = function(item) {      item.answer = item.answersavailable.filter(function(option) {        return option.selected;      })      .map(function(option) {        return option.id;      });    }  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  <div ng-app='test' ng-controller='test'>    <div ng-repeat="i in items">      <select ng-model="i.answer[0]"        ng-options="o.id o.title o in i.answersavailable"        ng-if="i.type == 'single'"></select>        <label ng-repeat="o in i.answersavailable"         ng-if="i.type == 'multiple'"        ng-init="initmultiple(i)">          <input type="checkbox"           ng-model="o.selected"           ng-change="updateanswer(i)" /> {{o.title}}      </label>      <div>{{i.answer}}</div>    </div>  </div>