Angular / Javascript - изменить класс после перезагрузки данных ng-repeat

0

Я использую angularJs с кордорой.

У меня есть ng-repeat, для каждого элемента у меня есть ng-click, который помещает значение каждого элемента в массив. Более того, когда я нажимаю, он удаляет и добавляет новый класс в div (с индексом $ index ng-repeat). Как контрольный список.

Дело в том, когда я перезагружаю этот 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");
            }
}
  • 1
    Вы используете JQuery, который использует другой контекст, чем Angular. Посмотрите на ngClass: docs.angularjs.org/api/ng/directive/ngClass
  • 0
    Почему это работает, когда я вызываю его в функции checkAmi?
Показать ещё 2 комментария
Теги:
arrays
cordova

1 ответ

0

HTML с динамическим ng-классом, хранящимся в массиве, в зависимости от индекса:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню