Question

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

Answer 1

HTML中包含动态ng-class的数组，其数量取决于索引：

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

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

1 个答案: