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

Angular/Javascript - change class after data of ng-repeat reloaded

本文关键字:数据 ng-repeat 加载 Javascript -重 新加载 Angular      更新时间:2023-09-26

我在cordova中使用angularJs。

我有一个ng-repeat,在每个项目上我有一个ng-click,它把每个项目的值放在一个数组中。此外,当我单击时,它正在删除并向div添加一个新类(使用ng-repeat的$index)。就像一个清单。

事实是,当我重新加载那个ng-repeat时,当我点击它时,我丢失了我刚刚添加的类。当我调用重新加载ng-repeat所显示的项目的函数时,我尝试(与未更改的数组)重新添加类。但是它没有添加类:/

下面是我的代码:

<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);
                }

所以,当我重新加载ng-repeat显示的数据时,我试图把它放进去,但它不会再改变类。

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");
            }
}

根据索引在数组中存储动态ng-class的HTML:

<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>

根据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";
        }
}

检查您刚刚单击的行并更改ng类(此外,我存储了刚刚单击的行的索引,以便声明$scope。isChecked[j]不同,如果我点击它…

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);
                }