Bind Checkboxes to Angular Model array

Question

I want to bind a list of checkboxes to an array directly in angular, so that when the checkbox is selected, it's value is pushed onto the array, and when not checked, it is popped off, so that the array on the model always represents the final state I want. Previously, I had done it by mapping checkboxes to array index, and then later stripping out null values - but I would like to try it another way.

I want stop binding directly to the model, but just run a function when the checkboxes are updated, which handles putting data on the array.

1. Is there anything wrong with this approach?
2. Are there any caveats I must beware of when updating the model from the controller?

HTML (Angular)

<div ng-app="app" ng-controller="Ctrl">
    <span ng-repeat='option in options'>
        <label>{{option.value}}</label>
        <input type="checkbox"         
        ng-value="option.code"
     ng-checked="selected.indexOf(option.code) > -1"
        ng-click="toggleSelect(option.code)" />
        <br />
    </span><br />
    {{selected}}
</div>

JavaScript (Angular)

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

App.controller('Ctrl', ['$scope', function($scope){
    $scope.options = [
        {value: "Jan", code: 1}, 
        {value: "Feb", code: 2}, 
        {value: "Mar", code:  3}, 
        {value: "Apr", code:  4}, 
        {value: "May", code:  5}, 
        {value: "Jun", code:  6}, 
        {value: "Jul", code:  7}, 
        {value: "Aug", code:  8}, 
        {value: "Sep", code:  9}, 
        {value: "Oct", code:  10}, 
        {value: "Nov", code:  11}, 
        {value: "Dec", code:  12}
    ];

    $scope.selected = [1, 2, 9]

    $scope.toggleSelect = function toggleSelect(code) {
        var index = $scope.selected.indexOf(code)

        if (index == -1) {
            $scope.selected.push(code)
        }
        else {
            $scope.selected.splice(index, 1)
        }
    }
}]);

Demo: http://jsfiddle.net/rianodwyer/8dPRn/

Answer 1

I want stop binding directly to the model, but just run a function when the checkboxes are updated, which handles putting data on the array.

This is a power of Angular that allows you to manage object (that represents your check-box list) easily. Less code and sure easy to maintain. In some cases however, we want to keep track of change and do other stuff (I mean in addition to check/uncheck action).

For example:

 $scope.toggleSelect = function toggleSelect(code)
 {
  /**/
 AsyncService.doStuff();
 }

Is there anything wrong with this approach?

Nothing wrong but this aproach (in your case) is similar to javascript native. So we lose angular advantage. I would use model binding and implement $watch on $scope.options (or even $watchCollection ). Something like:

$scope.$watch(function () {
    return $scope.options; // listen on model watch
},
function (newValue, oldValue) {
    /* any checkbox clicked */
}, true);

Are there any caveats I must beware of when updating the model from the controller?

Don't think so, pretty straightforward flow.