gpt4 book ai didi

javascript - $localStorage 数组与 $scope 数组不匹配

转载 作者:行者123 更新时间:2023-12-03 08:06:22 26 4
gpt4 key购买 nike

我将对象推送到 $localStorage 数组以实现持久化。我还在添加/删除对象之前检查此数组以查看对象是否存在(如果存在,则应该splice,如果不存在,则它将push)。

当我刷新页面时,从 $localStorage 返回的数据似乎与刷新前不同,因为我的检查功能不起作用,尽管它看起来完全一样关于检查。

被推送的对象的结构如下:

    {
"createdAt": "2015-04-24T10:21:21.649Z",
"difficulty": "Hard",
"exerciseDescription": "Lie on your back on a bench and take hold",
"exerciseID": "3101",
"exerciseName": "Bench Press",
"images": [8679, 8680, 8682],
"tags": ["Barbell", "Horizontal Flexion", "Extension", "Strength", "Chest", "Triceps", "Shoulder", "Elbow, Wrist & Hand"],
"updatedAt": "2015-09-09T20:14:59.681Z",
"words": ["bench", "press", "chest"],
"objectID": "ak6t7ukQdY",
"_highlightResult": {
"exerciseName": {
"value": "Bench Press",
"matchLevel": "none",
"matchedWords": []
}
}
}

检查对象是否存在(切换添加/删除)

$scope.addExerciseToProgramme = function(exercise) {

if (!$localStorage.Programme) {
$localStorage.Programme = [];
}

var index = $localStorage.Programme.indexOf(exercise);

if (index > -1) {
$localStorage.Programme.splice(index, 1);
} else {
$localStorage.Programme.push(exercise);
}
}

监视/加载$localStorage的函数

$scope.$watch(function() {
return $localStorage.Programme
}, function(programme) {
$scope.programme = programme;
});

ng-class 检查锻炼是否在计划中

  <i class="exercise-add-indicator ion-ios-checkmark-outline" ng-class="{'orange': programme.indexOf(exercise) > -1}"></i>

问题

这有两个问题:

  1. 刷新后,ng-class 不会根据我的 $scope.programme

    的内容有条件地添加类<
  2. addExerciseToProgramme 函数不遵守 indexOf 检查,并且无论如何都会将练习对象推送到数组!

最佳答案

Array.prototype.indexOf() 使用严格相等:只有当操作数引用相同的对象时,比较对象的表达式才为 true。

在使用 localStorage 时不应使用此选项。

将对象保存到 localStorage 时,它​​会变成字符串。当被检索时,它再次变成一个对象。

然而,这将是一个新对象,即使它看起来完全相同。

例如,这将产生 false:

var object1 = { id: 1 };
var object2 = { id: 1 };

console.log(object1 === object2);

要使其正常工作,您可以实现一个自定义函数,该函数根据您选择的属性值检索索引。请注意,它应该唯一

例如:

$scope.getExerciseIndex = function(exercise) {

var index = -1;

if (!$scope.programme) return index;

for (var i = 0; i < $scope.programme.length; i++) {

if ($scope.programme[i].exerciseID !== exercise.exerciseID) continue;

index = i;
break;
}

return index;
};

$scope.exerciseExists = function(exercise) {

var index = $scope.getExerciseIndex(exercise);
return index > -1;
};

$scope.addExerciseToProgramme = function(exercise) {

if (!$localStorage.Programme) {
$localStorage.Programme = [];
}

var index = $scope.getExerciseIndex(exercise);

if (index > -1) $localStorage.Programme.splice(index, 1);
else $localStorage.Programme.push(exercise);
};

HTML:

... ng-class="{'orange': exerciseExists(exercise) }" ...

演示: http://plnkr.co/edit/R6TEisvQ7gkDcwBgw0D1?p=preview

关于javascript - $localStorage 数组与 $scope 数组不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34371733/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com