Angular 1.6 - Best way to bind an array of objects to checkbox inputs via ng-model

Question

Having this table row in mind, I'm trying to dynamically enable/disable the appropriate checkboxes:

function enableTheRoles(data){
  var myRoles = [
    {role1: true, name: "Role One",   enabled: true},
    {role2: false, name: "Role Two",   enabled: false},
    {role3: true, name: "Role Three", enabled: true},
    {role4: false, name: "Role Four",  enabled: false},
    {role5: true, name: "Role Five",   enabled: true},
    {role6: false, name: "Role Six",   enabled: false},
    {role7: true, name: "Role Seven", enabled: true},
    {role8: false, name: "Role Eight",  enabled: false},
    {role9: true, name: "Role Nine", enabled: true},
    {role10: false, name: "Role Ten",  enabled: false}
  ];

}

<tr>
<td>
  <input type="checkbox" name="role1" ng-model="ctrl.data.roles.role1" />&nbsp;Role One
</td>
<td>
  <input type="checkbox" name="role2" ng-model="ctrl.data.roles.role2" />&nbsp;Role Two
</td>
<td>
  <input type="checkbox" name="role3" ng-model="ctrl.data.roles.role3" />&nbsp;Role Three
</td>
<td>
  <input type="checkbox" name="role4" ng-model="ctrl.data.roles.role4" />&nbsp;Role Four<
</td>
</tr>

<tr>
  <td>
  <input type="checkbox" name="role5" ng-model="ctrl.data.roles.role5" />&nbsp;Role Five
</td>
<td>role six</td>
<td>role seven</td>
<td>role eight</td>
</tr>

So far I've managed to iterate the source data (coming back from an Angular service), and create a new array entitled myRoles.

I'd like to now tie the myRoles array to the checkbox inputs on my view, and therefore enable/disable accordingly.

So in other words, if the "Role One" checkbox should be enabled, then ng-model=ctrl.data.roles.role1 should pick up the enabled property from the myRoles array.

Perhaps iterating thru ng-model ?

Any advice is appreciated. In the meantime, I will research ...

Intervalia · Answer 1 · 2017-11-03T21:32:33.793

Consider using the ng-repeat directive as demonstrated here:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      $scope.myRoles = [
        {role1: true, name: "Role One",   enabled: true},
        {role2: false, name: "Role Two",   enabled: false},
        {role3: true, name: "Role Three", enabled: true},
        {role4: false, name: "Role Four",  enabled: false}
      ];
    });
    </script>
  </head>
  <body ng-controller="appController">
    <table>
      <tr>
        <td ng-repeat="role in myRoles">
          <input type="checkbox" name="role1" ng-model="role.enabled" />&nbsp;{{role.name}}
        </td>
      </tr>
    </table>
  </body>
</html>

UPDATE Based on responses:

Are you after the layout to be this:

1  2  3  4
5  6  7  8
9  10

or this:

1  4  7  10
2  5  8
3  6  9

For the first layout this will work:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Example</title>
    <style>
    .role {
      display: inline-block;
      width: 25%;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      window.x = $scope.myRoles = [
        {role1: true, name: "Role One",   enabled: true},
        {role2: false, name: "Role Two",   enabled: false},
        {role3: true, name: "Role Three", enabled: true},
        {role4: false, name: "Role Four",  enabled: false},
        {role1: true, name: "Role Five",   enabled: false},
        {role2: false, name: "Role Six",   enabled: true},
        {role3: true, name: "Role Seven", enabled: true},
        {role4: false, name: "Role Eight",  enabled: false},
        {role1: true, name: "Role Nine",   enabled: false},
        {role2: false, name: "Role Ten",   enabled: false}
      ];
    });
    </script>
  </head>
  <body ng-controller="appController">
    <span class="role" ng-repeat="role in myRoles">
      <input type="checkbox" name="role1" ng-model="role.enabled" />&nbsp;{{role.name}}
    </span>
  </body>
</html>

Now to make it more interested, in turns out I have 10 total roles coming back from service. So I need to cleanly display only four elements per row. I suppose I could split up my array into 3 separate ones, then have three `` sections...but it doesn't seem efficient... — bob.mazzo, Nov 03 '17 at 21:01
Instead of putting everything in a table you can just place it into `` tags and it will wrap automatically. If you need more precision then just allowing it to wrap based on screen width, then it will take more that just using `` tags. — Intervalia, Nov 03 '17 at 21:07
Based on your answer, I would say that it works. However, of course now I'm challenged with create three separate `` elements for a clean-looking table.Thanks. — bob.mazzo, Nov 03 '17 at 21:20

Angular 1.6 - Best way to bind an array of objects to checkbox inputs via ng-model

1 Answers1