keeping the "checked" value to an input checkbox after search using ng-repeat | Angularjs

Question

I have to let the user select items to submit them later on, but my problem occur when selecting multiple items and then search for another items to select them, the previous selected items rested to default values unchecked.

how to keep the checked value to the selected items after calling again getAllItems function? because what happens is that the ng-repeat clear the value of the previous selected items.

My view:

<div id="dialog-items">
         // the search box
        <input ng-change="getAllItemNames(searchValMultiItems)" ng-model="searchValMultiItems" type="text"/>

        <table>
            <th>Designation</th>
            <th>Colisage</th>
            <th>Code</th>
            //the mark() function is to set checked value to selected input and store the item in an array
            <tr ng-repeat="d in allDesignation" ng-click="markItem(d.itemName); ischeck=true;">
                <td ><input type="checkbox" ng-checked="ischeck" /> {{d.itemName}}</td>
                <td>{{d.item_colisage}}</td>
                <td>{{d.code}}</td>
            </tr>
        </table>
</div>

JS:

//calling this function to search for an item
 $scope.getAllItemNames=function(searchValMultiItems){

    var searchItems=searchValMultiItems;

    var url="../php/mainPageFacture.php";
    var data = {"function":"getAllItemNames","searchValMultiItems":searchItems};

    var options={
        type : "get",
        url : url,
        data: data,
        dataType: 'json',
        async : false,
        cache : false,
        success : function(response,status) {
            $scope.allDesignation=response;
            $scope.safeApply(function() {});

        },
        error:function(request,response,error){
            alert("Error");
        }
    };
    $.ajax(options);
}

 /*this is responsible to set checked value to true when 
   item is selected and store all selected item in an array*/
 $scope.markItem=function(itemName){

    if( $.inArray(itemNameWithCode, multiSelectItem_names) !== -1 ) {
       alert("This Item is already added to this Invoice");
    }else{
        multiSelectItem_names.push(itemNameWithCode);
    }
}

I store all selected items in an array and even after search the array keep the value, but problem is only whith the checked mark, i'll attach a photo for more clarification

Anthony · Accepted Answer · 2018-01-10T18:51:48.540

1

Make the checked property part of the items in the list.

<tr ng-repeat="d in allDesignation" ng-click="markItem(d.itemName); d.ischeck=!d.ischeck;">
            <td ><input type="checkbox" ng-checked="d.ischeck" /> {{d.itemName}}</td>
            <td>{{d.item_colisage}}</td>
            <td>{{d.code}}</td>
        </tr>

This requires some changes in your implementation.

An option would be to store the list items in $scope.

$http.get('dataurl')
.then(function(response) {
    $scope.items = response.data;
});

You can use a filter to filter the items in the ng-repeat.

<tr ng-repeat="d in items | filter:{ property: filterText }">...</tr>

See here ng-repeat :filter by single field

edited Jan 10 '18 at 18:51

answered Jan 10 '18 at 17:27

Anthony

1,667
2
17
28

This doesn't work, maybe because the `ng-change="getAllItemNames(searchValMultiItems)"` will call again all the list ? – Ali Jan 10 '18 at 17:38
Ah, I didn't realize get all item names makes a web call. If you are repopulating the list whenever the input is changed you need to store the checked value with the data. Alternatively, if there aren't too many items in the list, you could load all items then filter the items in the ui this way. – Anthony Jan 10 '18 at 17:41
are 1k or 2k items considered many? what i mean if the items are between 1k and 2k max, can i use filter instead of the web call? – Ali Jan 10 '18 at 17:46
1

If the objects are small I would expect 2000 to work fine in modern browsers on modern computers. Test it out in you situation, then you can decide if the performance is acceptable. Having all items in memory means you can add a checked value or whatever you want. Another note: you might not want to print all the items in the ng-repeat, so you don't modify the DOM so much. You could try a virtual repeat, or a custom function to return a subset. – Anthony Jan 10 '18 at 17:52
i think the average items is less than 1k but the worst case scenario is 2k and even though the web call not the best solution, can you please wirte example on how to filter data by search input? and put it as answer so i can accept it and let other people benefits from the solution. many thanks in advance – Ali Jan 10 '18 at 18:07
You're welcome, glad to help. One thing to note, you will probably need to change the ng-click function to toggle the ischeck value rather than always set it to true. – Anthony Jan 10 '18 at 18:23
how to toggle isCheck value in the ng-click? – Ali Jan 10 '18 at 18:56

keeping the "checked" value to an input checkbox after search using ng-repeat | Angularjs

1 Answers1