Angular / Javascript-重新加载ng-repeat数据后更改类

Question

I am using angularJs with cordova.

I have a ng-repeat, on each items I have a ng-click which put the value of each item in a array. Moreover when I click, it is removing and adding a new class to the div (with the $index of ng-repeat). Like a checklist.

The fact is when, I reload that ng-repeat, I lost the classes I just added when I clicked on it. I tried (with the array which has not changed) to re-add the class when I call the function that reload the items shown by the ng-repeat. But it doesn't add the class :/

Here are my code :

<div id="ami" class="list-group">
           <div href="#" class="list-group-item" ng-repeat="ami in listeAmis"> {{ami.pseudo}}<i id="checkAmi{{$index}}" class="fa fa-circle-o pull-right" ng-click="mapCtrl.checkAmi(ami.pseudo, $index);"></i><i class="fa fa-user pull-left" ></i></div>
</div>

Javascript

var amisNotifies = [];

                mapCtrl.checkAmi = checkAmi;
                function checkAmi(pseudo, id) {
                    var info = ({
                        pseudo: pseudo,
                        id: id
                    });
                    var getIndexOf = function (psdu) {
                        for (var i = 0; i < amisNotifies.length; i++) {
                            if (amisNotifies[i].pseudo === psdu) {
                                return i;
                            }
                        }

                        return -1;
                    };

                    if (amisNotifies.length > 0) {
                        var index = getIndexOf(pseudo);
                        if (index > -1) {
                            //so already exists. now remove it.
                            Array.prototype.splice.call(amisNotifies, index, 1);
                            $("#checkAmi" + id).addClass("fa-circle-o");
                            $("#checkAmi" + id).removeClass("fa-check-circle-o");
                        }
                        else {
                            //does not exist, now add it
                            amisNotifies.push(info);
                            $("#checkAmi" + id).removeClass("fa-circle-o");
                            $("#checkAmi" + id).addClass("fa-check-circle-o");
                        }

                    } else {
                        amisNotifies.push(info);
                        $("#checkAmi" + id).removeClass("fa-circle-o");
                        $("#checkAmi" + id).addClass("fa-check-circle-o");
                    }
                    console.log(amisNotifies);
                }

And so, when I reload the data shown by the ng-repeat I tried to put it but it doesn't change the class again...

if (amisNotifies.length > 0) {
            for (var i = 0; i < amisNotifies.length; i++) {
            console.log(amisNotifies[i].id);
            $("#checkAmi" + amisNotifies[i].id).removeClass("fa-circle-o");
            $("#checkAmi" + amisNotifies[i].id).addClass("fa-check-circle-o");
            }
}

Answer 1

HTML with dynamic ng-class stocked in array depending of the index :

<div id="ami" class="list-group">
        <div href="#" class="list-group-item" ng-repeat="ami in listeAmis"> {{ami.pseudo}}
                 <i id="checkAmi{{$index}}" ng-class="isChecked[{{$index}}]" ng-click="mapCtrl.checkAmi(ami.pseudo, $index);"></i>
        </div>
</div>

Declare the numbers of variable depending the size of ng-repeat :

if ($scope.listeAmis.length > 0) {
        for (var j = 0; j < $scope.listeAmis.length; j++) {
                 $scope.isChecked[j] = "fa fa-circle-o pull-right";
        }
}

Check the line you just clicked on and change the ng-class (moreover I stock the index of the line a just clicked in order to declare $scope.isChecked[j] differently if I clicked on it ...

mapCtrl.checkAmi = checkAmi;
                function checkAmi(pseudo, id) {
                    var info = ({
                        pseudo: pseudo,
                        id: id
                    });
                    var getIndexOf = function (psdu) {
                        for (var i = 0; i < amisNotifies.length; i++) {
                            if (amisNotifies[i].pseudo === psdu) {
                                return i;
                            }
                        }

                        return -1;
                    };

                    if (amisNotifies.length > 0) {
                        var index = getIndexOf(pseudo);
                        if (index > -1) {
                            //so already exists. now remove it.
                            Array.prototype.splice.call(amisNotifies, index, 1);
                            $scope.isChecked[id] = "fa fa-circle-o pull-right";
                        } else {
                            //does not exist, now add it
                            amisNotifies.push(info);
                            $scope.isChecked[id] = "fa fa-check-circle-o pull-right";
                        }

                    } else {
                        amisNotifies.push(info);
                        $scope.isChecked[id] = "fa fa-check-circle-o pull-right";
                    }
                    console.log(amisNotifies);
                }