Angular/Javascript -重新加载ng-repeat的数据后更改类
Angular/Javascript - change class after data of ng-repeat reloaded
我在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);
}
相关文章:
- AngularJS -- 创建自定义数据绑定和 ng-repeat
- 尝试使用 AngularJS ng-repeat 显示 JSON 数据不起作用
- 使用 ng-repeat解析不均匀数据/ json对象
- 使用ng repeat从两个不同的JSON文件中提取数据
- 使用ng repeat用数组中的数据填充表行
- 如何在Firebase中使用Angularjs ng-repeat检索嵌套数据
- 如何在使用 ng-repeat 显示表数据时放置条件新行
- ng-repeat / ng-bind 不会显示我的数据
- 使用 ng-repeat 生成模板的副本,每个副本都有不同的数据
- Ng-repeat以呈现具有键值对的数据
- 从数据库中获取数据,并在 AngularJS 中的 ng-repeat 中使用它
- 如何在AngularJS(ng-repeat)中获取选定的单选按钮数据
- 角度 - 在不使用 ng-repeat的情况下获取数据长度
- AngularJS “ng-repeat |滤波器:..“没有像我预期的那样工作(不显示任何数据)
- 在角度材料对话框数据输入/推送后更新ng-repeat
- AngularJS ng-repeat在新数据进入时不更新视图
- Angular - ng-repeat - 获取 1 个列表中的所有 json 子数据
- 将数据从 Node 发送到 Angular 以用于 ng-repeat 的正确方法
- 以 ng-repeat 显示来自 Firebase 的数据
- 如何使用数据 ng-repeat获取从 A 到 Z 的索引值