Select/Deselect checkbox element AngularJS

Question

I have modal with a list of items that can be selected using a checkbox. Now what I want to do is to be able to also deselect an element, such that when I deselect that element it gets removed from the array and the checkbox gets deselected. At the moment my function adds an element, regardless if I select or deselect an item.

This is my html:

<div class="md-list-item-text">
    <md-checkbox ng-model="Item.isChecked " aria-label="Checkbox 1" ng-change="selectItem(modelItem)">
        <h3>{{ $eval('modelItem.'+propertyName) }}</h3>
        <p>{{ $eval('modelItem.'+propertyDesc) }}</p>
    </md-checkbox>
</div>

and this is the function that selects all elements when they are checked.

$scope.selectItem = function (Item) {
    $scope.temp.push(Item.name)
    prepareDisplayText();
}

Does anybody have some ideas, or suggestions on how to rewrite the function to also work for deselected elements?

Thanks in advance!

Icycool · Accepted Answer · 2016-07-08 09:02:40Z

1

Try this-

<div class="md-list-item-text">
    <md-checkbox ng-model="modelItem.isChecked " aria-label="Checkbox 1" ng-change="selectItem(modelItem)">
        <h3>{{ $eval('modelItem.'+propertyName) }}</h3>
        <p>{{ $eval('modelItem.'+propertyDesc) }}</p>
    </md-checkbox>
</div>

$scope.selectItem = function (Item) {
    if(Item.isChecked){
        $scope.temp.push(Item.name)
    }
    else if($scope.temp.indexOf(Item.name) != -1){
        var index = $scope.temp.indexOf(Item.name);
        $scope.temp.splice(index,1);
    }        
    prepareDisplayText();
}

It is working fine for me.

edited Jul 8, 2016 at 9:02

Icycool

7,1991 gold badge27 silver badges33 bronze badges

answered Jul 8, 2016 at 9:01

neha soni

2213 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select/Deselect checkbox element 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