jisaak jisaak - 6 months ago 10
AngularJS Question

Bind Id of checkboxes to an array

I have a view model containg an object that is used to display some checkboxes:

components = {
"ComponentInfos": [
{
"Id": "1abb0ee5-7e44-4e45-92da-150079066e99",
"FriendlyName": "Component1",
"LimitInfos": [
{
"Id": "4b7cd37a-2378-4f4f-921b-e0375d60d19c",
"FriendlyName": "Component1 Full",
},
{
"Id": "ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2",
"FriendlyName": "Component1 Light",
}
]
}


I am able to create the checkboxes with
FriendlyName
as label:


<h4>{{l.FriendlyName}}</h4>

<div>
<div ng-repeat="limitinfo in l.LimitInfos">
<label>
<input type="checkbox" ng-model="vm.settings.ComponentInfos[limitinfo.Id]"
value="{{limitinfo.Id}}"/> {{limitinfo.FriendlyName}}
</label>
</div>
</div>




I want to store the selected
LimitInfo.Id
in an
array
for each selected checkbox. I was able to store them in an object like this:

settings = {
"ComponentInfos" : {}
};


Result example:

"2e80bedb-4a18-4cc4-bdfd-837ffa130947": true,
"add1edf8-4f11-4178-9c78-d591a6f590e3": true


What I do need is to store the
LimitInfo.Id
in an
array
like this:

settings = {
"ComponentInfos" : []
};


Expected result:

"2e80bedb-4a18-4cc4-bdfd-837ffa130947", "add1edf8-4f11-4178-9c78-d591a6f590e3"


I uploaded my code to Plunker.

Answer

Demo by directive:

var app = angular.module('plunker', []);

app.directive('myCheckbox', function() {
  return {
    restrict: 'EA',
    template: '<label>' + '<input type="checkbox" ng-model="model" /> {{label}}' + '</label>',
    replace: true,
    scope: {
      label: '@',
      value: '@',
      model: '=?',
      output: '='
    },
    link: function(scope, elements, attrs) {
      scope.$watch('model', function(nv) {
        if (nv) {
          scope.output.push(scope.value);
          return false;
        }
        scope.output.splice(scope.output.indexOf(scope.value), 1);
      });
    }
  }

});

function MyViewModel() {
  this.components = {
    "ComponentInfos": [{
      "Id": "1abb0ee5-7e44-4e45-92da-150079066e99",
      "FriendlyName": "Component1",
      "LimitInfos": [{
        "Id": "4b7cd37a-2378-4f4f-921b-e0375d60d19c",
        "FriendlyName": "Component1 Full",
        "ImpliedLimits": [
          "ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2"
        ]
      }, {
        "Id": "ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2",
        "FriendlyName": "Component1 Light",
        "ImpliedLimits": [
          "4f74abce-5da5-4740-bf89-dc47dafe6c5f"
        ]
      }, {
        "Id": "4f74abce-5da5-4740-bf89-dc47dafe6c5f",
        "FriendlyName": "Component2 User",
        "ImpliedLimits": []
      }]
    }, {
      "Id": "ad95e191-26ee-447a-866a-920695bb3ab6",
      "FriendlyName": "Component2",
      "LimitInfos": [{
        "Id": "8d13765a-978e-4d12-a1aa-24a1dda2149b",
        "FriendlyName": "Component2 Full",
        "ImpliedLimits": [
          "4f74abce-5da5-4740-bf89-dc47dafe6c5f"
        ]
      }, {
        "Id": "2e80bedb-4a18-4cc4-bdfd-837ffa130947",
        "FriendlyName": "Component2 Light",
        "ImpliedLimits": [
          "4f74abce-5da5-4740-bf89-dc47dafe6c5f"
        ]
      }, {
        "Id": "add1edf8-4f11-4178-9c78-d591a6f590e3",
        "FriendlyName": "Component2 Viewer",
        "ImpliedLimits": [
          "4f74abce-5da5-4740-bf89-dc47dafe6c5f"
        ]
      }]
    }]
  };

  this.settings = {
    "ComponentInfos": []
  };
}



app.controller('MainCtrl', function($scope) {
  $scope.vm = new MyViewModel();
});
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="l in vm.components.ComponentInfos">

    <h4>{{l.FriendlyName}}</h4>

    <div>
      <div ng-repeat="limitinfo in l.LimitInfos">
        <my-checkbox label="{{limitinfo.FriendlyName}}" value="{{limitinfo.Id}}" output="vm.settings.ComponentInfos"></my-checkbox>
      </div>
    </div>
  </div>


  <hr>
  <pre>
    {{vm.settings | json }}
  </pre>

</body>

</html>