我有以下 HTML:
<li ng-click="toggleBeep(beep)" ng-class-odd="'gradient-two'"
ng-class-even="'gradient-three'" ng-repeat="beep in beeps">
<span>{{beep.name}}</span>
<label class="bold" ng-show="isSelected(beep)">selected</label>
</li>
JavaScript(AngularJS):
$scope.beeps = $sounds.getAll();
// get stored beep from localStorage
var notification_beep =
angular.fromJson(localStorage.getItem('notification_beep'));
console.log($scope.beeps[0]);
console.log(notification_beep);
// handle change sound on click event
$scope.toggleBeep = function (beep) {
$cbSounds.play(beep.file);
$scope.selected = beep;
localStorage.setItem('notification_beep', angular.toJson(beep));
};
$scope.isSelected = function (beep) {
return $scope.selected === beep;
};
现在,当我单击任何 li
时,由于 $scope.isSelected
函数,我会显示所选的 label
。但是,当我尝试添加此行 $scope.selected = notification_beep
(存储在 localStorage 中的蜂鸣对象)时,未显示 label
并且我得到以下返回值.
我发现的唯一区别是 $$hashkey 出现在 $scope.beeps[0]
上,而它不在 notification_beep
上。这可能是原因吗?谢谢。
最佳答案
以下比较:
$scope.selected === beep
仅当两个变量引用同一对象时才返回 true。
以下行将创建一个新对象:
var notification_beep = angular.fromJson(localStorage.getItem('notification_beep'));
因此它不会引用与 $scope.selected
相同的对象。
澄清一下,这将返回 false
: { name: 'Beep 1' } === { name: 'Beep 1' }
最简单的解决方案是与对象的唯一基元进行比较。
例如:
return $scope.selected.name === beep.name;
$$hashkey
属性通过ng-repeat
插入到对象中,用于跟踪哪个对象对应于哪个DOM模板。它在 notification_beep
中不存在的原因是 angular.toJson
从对象中删除了该属性。
关于javascript - 由于额外的 $$hashKey,angularjs 函数失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28511973/