Duplicates in a repeater error AngularJS

156 Views Asked by At

I am trying to get rid of an error in Angular, but I do not quite know how to approach this problem. I have a select all checkbox in AngularJS and a list of items that also have a checkbox. The idea is that the items can be checked individually or with a select/deselect all button. The idea is thta when I have let's say two items checked and I want to press the select all button afterwards because maybe I do not want to go through all the trouble of selecting all of them I get an error that duplicates are not allowed. Does anyone know how to solve this ?

This is my JS function for it:

$scope.selectAll = function(modelItemsList){
    console.log($scope.modelItemsList);
    $rootScope.modelItemsList.allItemsSelected = !$rootScope.modelItemsList.allItemsSelected;
    console.log($rootScope.modelItemsList.allItemsSelected);
    if($rootScope.modelItemsList.allItemsSelected){
        for (var i = 0; i < $scope.modelItemsList.length; i++) {
            $rootScope.temp.push($scope.modelItemsList[i].name);
            console.log($scope.modelItemsList[i].name);
            $scope.modelItemsList[i].isChecked = $rootScope.modelItemsList.allItemsSelected;
            console.log($scope.modelItemsList[i].isChecked);
            console.log($rootScope.modelItemsList.allItemsSelected);

        }
    }
    else if (!$rootScope.modelItemsList.allItemsSelected){
        for (var i = 0; i < $scope.modelItemsList.length; i++) {
             $scope.modelItemsList[i].isChecked = $rootScope.modelItemsList.allItemsSelected;
             $rootScope.temp = [];
             console.log($scope.modelItemsList[i].isChecked);
        }
    }
}

and this is my html:

<md-content class="md-padding autocomplete" layout="column">
    <md-chips ng-model="$root.items" md-max-chips="5">
        <md-autocomplete
        md-selected-item="selectedItem"
        md-search-text="searchText"
        md-items="item in querySearch(searchText)"
        md-item-text="item.name"
        md-no-cache="true"
        placeholder="PU">
            <span md-highlight-text="searchText">{{item.name}}</span>
        </md-autocomplete> 
        <md-chip-template>
            <strong>{{$chip}}</strong>
        </md-chip-template>
    </md-chips>
</md-content>   

code for select all button:

<div class="md-list">
                <md-checkbox ng-model="modelItemsList.allItemsSelected" 
                ng-change="selectAll(modelItemsList)">
                {{"Alle markieren" | translate}}
                         </md-checkbox>
                    <md-list> <md-list-item class="md-3-line"
                        ng-repeat="modelItem in modelItemsList | filter:searchText >
                    <div class="md-list-item-text">
                        <md-checkbox ng-model="modelItem.isChecked " aria-label="Checkbox 1" ng-change="selectModelItem(modelItem)">
                        <h3>{{ $eval('modelItem.'+propertyName) }}</h3>
                        <p>{{ $eval('modelItem.'+propertyDesc) }}</p>
                         </md-checkbox>
                    </div>

Thanks in advance!

0

There are 0 best solutions below