CODEWITHSUNDEEP
javascriptangularjscheckbox
Zyga
Zyga

Reputation: 2427

Bind two arrays into one group of checkboxes - angularjs

I have a JSON object that contains an array of items (which have name and id) and also an array of selected items (which would have only ids of the items from previous array that has been selected).

What I want to render on HTML page is a group of checkboxes (i.e. one checkbox per available item) that will be also binded to the second array of selected items. I know how to do it in JQuery, but I wonder if there is a clean "angularJS-way" of handling this and binding it somehow to the model.

So when the page is rendered, I want certain checkboxes to be selected (as per the second array) and also whenever I select/deselect an item, it should either appear/disappear from that array.

Hope I explained properly - I cannot change the structure of JSON source object as it's retrieved from the server and I have no control over it.

JSFiddle below - its obviously not working - I dont know what should I bind ng-model to for each check box.

http://jsfiddle.net/ej7mhv71/

    <span ng-repeat="item in object.stock">
      <label class="checkbox" for="{{item.id}}">
        <input type="checkbox" ng-model="object.selected[item.id]" id="{{item.id}}" />
          {{item.name}}<br/>
      </label>
    </span>



   $scope.object = {"stock":[ { "name": "Item1", "id": "1" } , 
                              {"name": "Item2", "id": "2" }, 
                              {"name": "Item3", "id": 3}], "
                    selected":{"ids":[1,2]}}

Any help appreciated.

Upvotes: 3

Views: 902

Answers (1)

Haroon Yousuf
Haroon Yousuf

Reputation: 524

I am not saying its a best way to do it but I solved your problem without changing the JSON. I used the ng-init="item.IsSelected = (object.selected.ids.indexOf(item.id*1) != -1)" to make your item selected initially. Secondly I bind the fuction ng-click="removeSelectedItem(item.id,item.IsSelected)" to Remove or Add item from your Selected Item Array.

HTML:

<div ng-controller="Ctrl">
    <span ng-repeat="item in object.stock">
      <label class="checkbox" for="{{item.id}}">
        <input type="checkbox" ng-model="item.IsSelected" ng-init="item.IsSelected = (object.selected.ids.indexOf(item.id*1) != -1)"  id="{{item.id}}" ng-click="removeSelectedItem(item.id,item.IsSelected)" />
          {{item.name}}<br/>
      </label>
    </span>
    <pre ng-bind="object | json"></pre>    
</div>

Controller: 

function Ctrl($scope) {

    $scope.object = {"stock":[ { "name": "Item1", "id": "1" } , {"name": "Item2", "id": "2" }, {"name": "Item3", "id": 3}], "selected":{"ids":[1,2]}}

    $scope.removeSelectedItem = function(itemId,isChecked){
        var selectedIndex =            $scope.object.selected.ids.indexOf(parseInt(itemId));

        var selectedItems =  $scope.object.selected.ids;
        if(isChecked){
            selectedItems.splice(selectedIndex,1);
        }
        else{
            if( selectedIndex == -1){
                selectedItems.push(parseInt(itemId))
            }
        }
    }

}

Here's the fiddle: http://jsfiddle.net/ej7mhv71/1/

Upvotes: 1

Related Questions