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

【问题标题】：Angular/Javascript - change class after data of ng-repeat reloadedAngular / Javascript - 重新加载ng-repeat数据后更改类
【发布时间】：2017-01-13 06:14:35
【问题描述】：

我正在使用带有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");
            }
}

【问题讨论】：

您正在使用 jQuery，它使用与 Angular 不同的上下文。看看 ngClass：docs.angularjs.org/api/ng/directive/ngClass
为什么我在函数 checkAmi 中调用它会起作用？
因为 Angular 使用了称为 jqLite 的 jQuery 子集
我看不到如何将每行的 ng-class 与 id 绑定（知道点击了哪一行），因为我有动态行数

标签： javascript css angularjs arrays cordova

【解决方案1】：

具有动态 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-class（此外，我存储了刚刚单击的行的索引，以便在单击时以不同的方式声明 $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);
                }

【讨论】：