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

Posted 2023-03-06

【中文标题】Angular / Javascript - 重新加载ng-repeat数据后更改类

【英文标题】：Angular/Javascript - change class after data of ng-repeat reloaded

【发布时间】：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 使用了称为 jqLit​​e 的 jQuery 子集

我看不到如何将每行的 ng-class 与 id 绑定（知道点击了哪一行），因为我有动态行数

【参考方案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);