由于额外的$$ 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时，由于label功能，我会显示所选的$scope.isSelected。但是，当我尝试添加此行$scope.selected = notification_beep时，这是存储在localStorage中的beep对象，label未显示，我得到以下返回值。

我能发现的唯一区别是，$scope.beeps[0]上存在$$ hashkey，而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从对象中删除了该属性。