Checkbox List not being populated after formatting array as JSON and mapping in ng-repeat

Question

plunk - https://plnkr.co/edit/2ptIAdOyaIw8mGqpU7Cp?p=preview

Rundown of what's happening - onload executing function createObjectFromEntityArrayWithKeys(), which formats array of values to add two new keys, one of which belonging to a new value boolean checked. New array, $scope.newEntityArray , is created on the $scope and accessed in my ng-repeat. It is assigned new formatted data.

This stems from an earlier problem - saving the state of an ng-repeat checkbox menu while/after it is/has been filtered.

Because I'm working with an array of only values, I had to alter this to attach a boolean, checked, to each value - leaving me with an array of JSON objects. This enables me to save the state of each checkbox. Problem is I think my mapping is incorrect, or my usage of ng-repeat with object mapping is. I'm really not sure why the list is not being populated. Any help appreciated.

EDIT

I've also tried using two ng-repeats, but same result:

<div ng-repeat="entity in newEntityArray | filter:simpleFilter">
    <div ng-repeat="(val, checked) in entity">
        <label> <input
           style="display: inline-block; margin-top: 5px"
           type="checkbox" ng-model="checked"
           ng-change="setModalEntity(val,checked)" /> <a>{{val}}</a>
        </label>
    </div>
</div>

manzapanza · Accepted Answer · 2016-02-24 17:35:04Z

The problem is caused exactly by the use of this onload calling a function from the global scope. You should refactor in a "angular way" trying something like this:

Controller:

var createObjectFromEntityArrayWithKeys = function(){
  $scope.newEntityArray = entityArray.map(function(value){
      return {"val":value, "checked":false};
  });
};

// execute when load the controller
createObjectFromEntityArrayWithKeys();

View:

I only removed the onload attribute.

<body ng-app="app">
  <div ng-controller = "mainCtrl">
    <div>
      <input type="text" placeholder="Search" ng-model="simpleFilter">
    </div>
    <div ng-repeat="entity in newEntityArray | filter:simpleFilter">
      <label> <input
        style="display: inline-block; margin-top: 5px"
        type="checkbox" ng-model="entity.checked"
        ng-change="setModalEntity(entity.val,entity.checked)" /> <a>{{entity.val}}</a>
      </label>
    </div>
    {{entityFromSelection}}
  </div>
</body>

DEMO PLUNKER

Collectives™ on Stack Overflow

Checkbox List not being populated after formatting array as JSON and mapping in ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related