javascript - 由于额外的 $$hashKey，angularjs 函数失败

Question

我有以下 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 上。这可能是原因吗？谢谢。

Answer 1

以下比较:

$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 从对象中删除了该属性。