CODEWITHSUNDEEP
angularjsselectcheckbox
blaa
blaa

Reputation: 811

Select/Deselect checkbox element AngularJS

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!

Upvotes: 1

Views: 334

Answers (1)

neha soni
neha soni

Reputation: 221

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.

Upvotes: 1

Related Questions