Question

I am trying to create a form part of which is a table that loops over a list of objects and for each object allows the user to check/uncheck attributes. The rest of the form works fine but I am having trouble setting the ng-model attribute on the checkboxes.

Here’s what I have:

<table>
    <thead>
        <tr>
            <td>Objects and Fields</td>
            <td>Createable</td>
            <td>Deleteable</td>
            <td>Readable</td>
            <td>Updateable</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="object in myAppObjects">
          <td>
            {{object.name}}&nbsp;{{object.id}}
            <input type="checkbox" name="app_access_{{object.id}}" ng-model="app_access" value="false">
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
</table>

At first I tried setting the ng-model=”app_access_{{object.id}}” so that I would have a unique ng-model for each cell. This caused the table row to be repeated several dozen times. Each of those empty cells will also have a check box. There will be five check boxes for each object and several objects in the form at a given time. I’ll need to be able to access each check box (or better yet a list of the checked ones) in the controller.

Answer 1

Since ngRepeat creates a new (child) scope for each item, creating new ng-models (that are tied to those new scopes) for the items will not work because those models/data will only be accessible inside those inner scopes. We can’t write a controller function to access those inner/child scopes. It is better to reference something in myAppObjects for the models (like @Max suggests in his second example).

If myAppObjects looks something like this:

$scope.myAppObjects = [
  {id: 1, cb1: true,  cb2: false, cb3: true, cb4: true,  cb5: false },
  {id: 2, cb1: false, cb2: false, cb3: true, cb4: false, cb5: true  },

You could write your ng-repeat like this:

<tr ng-repeat="appObj in myAppObjects">
    <td>{{appObj.id}}
        <input type="checkbox" ng-model="appObj.cb1"></td>
    <td><input type="checkbox" ng-model="appObj.cb2"></td>
    <td><input type="checkbox" ng-model="appObj.cb3"></td>
    <td><input type="checkbox" ng-model="appObj.cb4"></td>
    <td><input type="checkbox" ng-model="appObj.cb5"></td>
</tr>

Working fiddle: http://jsfiddle.net/mrajcok/AvGKj/

Bottom line: we need to have the checkbox models defined in/on the parent scope (in my fiddle, MyCtrl’s $scope), and not in/on the ngRepeat inner/child scopes.