Using a group of checkboxes in Angularjs

Question

Im having the following problem:

i have a group of checkboxes and an indifferent check too, in the database if indifferent is checked then an empty array is saved.

I have 2 use cases:

1) if indifferent is checked, the rest is not, as soon as i check another checkbox indifferent is unchecked (This is actually working)

2) if i select all checkboxes (except indifferent), all should be unchecked and indifferent should be checked. (This is not working)

Here is an extract of my code http://jsfiddle.net/ngbYW/

1) To test first use case: Indifferent is checked, as soon as you click Married, indifferent is unchecked, if u click again on Married to uncheck, indifferent is checked.

2) click on Single, Relationship and Married to get them checked, then indifferent is checked AND the last one where u clicked is checked too!

Hope im clear enough. What im doing wrong? Any help or suggestion will be appreciated.

Here is my code HTML

<div ng-app="">
<div ng-controller="MyCntrl">

    <label class="control-label">Family status</label>
    <div class="controls">
        <label class="checkbox inline" ng-repeat="item in familystatus"><input type="checkbox"  ng-click="addToSearchedProfile(item.id,'familystatus')" ng-checked="isChecked(item,'familystatus')" >{{item.text}}</label>

        <label class="checkbox inline"><input type="checkbox" value="" ng-click="addToSearchedProfile(undefined,'familystatus')" ng-checked="userSearchedProfile.familystatus.length=='0'">indifferent</label>
    </div>
    <label class="control-label">Sexuality</label>
    <div class="controls">
        <label class="checkbox inline" ng-repeat="item in sexuality"><input type="checkbox"  ng-click="addToSearchedProfile(item.id,'sexuality')" ng-checked="isChecked(item,'sexuality')" >{{item.text}}</label>
        <label class="checkbox inline"><input type="checkbox" value="" ng-click="addToSearchedProfile(undefined,'sexuality')" ng-checked="userSearchedProfile.sexuality.length=='0'">indifferent</label>
    </div>
    </div>
</div>

CONTROLLER

function MyCntrl($scope) {
    $scope.familystatus = [{id:1,text:'Heterosexual'},{id:2,text:'Bisexual'},{id:3,text:'Homosexual'}];
    $scope.sexuality = [{id:1,text:'Single'},{id:2,text:'Relationship'},{id:3,text:'Married'}];

    $scope.userSearchedProfile = {
        familystatus : [1],
        sexuality : []
    };

    $scope.isChecked = function(item, type) {
        return $scope.userSearchedProfile[type].indexOf(item.id)!==-1;
    };

    $scope.addToSearchedProfile = function(id, item) {
        if (angular.isUndefined(id)) {
            $scope.userSearchedProfile[item].length=0;
            return;
        }
        if ($scope.userSearchedProfile[item].indexOf(id) === -1) {
            $scope.userSearchedProfile[item].push(id);
        } else {
            $scope.userSearchedProfile[item].splice($scope.userSearchedProfile[item].indexOf(id), 1);
        }
        if ($scope[item].length === $scope.userSearchedProfile[item].length){
            $scope.userSearchedProfile[item].length=0;
        }
    };

}

Tosh · Accepted Answer · 2013-05-30 23:22:59Z

inter-restricting / counter acting form elements are very confusing to me too. I usually attack this kind of problem by defining a view model which represents the form state and let javascript code to handle the coordination rather than reacting to the indivisual events.

here is the simplified example: http://jsfiddle.net/4TBFn/

in template:

<label class="checkbox inline" ng-repeat="item in sexuality">
  <input type="checkbox"  ng-model="item.selected"/>{{item.text}}
</label>
<label class="checkbox inline">
  <input type="checkbox"  ng-model="indifferent"/>indifferent
</label>

in controller:

$scope.$watch('indifferent', function(v) {
    if (!v) return;
    for ( var i = 0; i < $scope.sexuality.length; ++i ) {
        $scope.sexuality[ i ].selected = false;
    }
});

$scope.$watch('sexuality', function(arr) {
    var selected = arr.reduce(function(s, c) { return s + (c.selected ? 1 : 0); }, 0);
    if ( selected === arr.length ) {
        $scope.indifferent = true;
    } else if ( selected > 0 ) {
        $scope.indifferent = false;
    }
}, true );

Collectives™ on Stack Overflow

Using a group of checkboxes in Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related