Angularjs проверяет массив перед нажатием с отключенным NG

Question

Каждому платью присваивается идентификатор, идентификатор платья можно найти в $StateParams Функция и URL страницы - например, #/dress/21.

Когда пользователь нажимает кнопку "Сердце" ("Нравится") или "Разбитое сердце" ("Не нравится"), идентификатор платья помещается в массив "Сердце / Разбитое сердце" в местном хранилище - см. Ниже.

Кроме того, когда нажата любая из кнопок, кнопка отключается сама, предотвращая нажатие нескольких идентификаторов одежды! Это можно отменить, нажав кнопку оперзит.

Эта проблема!
Я не могу понять, как предотвратить отправку того же идентификатора платья после обновления страницы - я попытался выполнить поиск в массиве, прежде чем выдавать идентификатор платья, но это не сработало. Кроме того, я могу предотвратить отправку двойных идентификаторов одежды, предотвращая двойные щелчки, но если я обновлю страницу, кнопка сможет выдвинуть идентификаторы платьев в массив, хотя в ней уже есть идентификатор платья!

Любое руководство поможет в огромной степени!
Спасибо.

ДИЗАЙН:

HTML:

<ul class="railcontrols">
  <li>
    <md-button aria-label="" class="md-fab md-mini" ng-click="heart()" ng-dblclick="return false;" ng-disabled="heartflag">
      <md-icon md-svg-src="svg/heart.svg"></md-icon>
    </md-button>
  </li>
  <li>
    <md-button aria-label="" class="md-fab md-mini" ng-click="brokenheart()" ng-dblclick="return false;" ng-disabled="brokenheartflag">
      <md-icon md-svg-src="svg/brokenheart.svg"></md-icon>
    </md-button>
  </li>
</ul>

ДИСПЕТЧЕР:

   fittingApp.controller('railsCtrl', ['$scope', '$localStorage', '$stateParams','$filter', function($scope, $localStorage, $stateParams, $filter) {
      $scope.$storage = $localStorage;
      var dressID = $stateParams.id;
      if ($scope.$storage.userLoveList === undefined) {
        var getUserID = $scope.$storage.profileData.userID;
        $scope.$storage.userLoveList = ({
          'userID': getUserID,
          'heart': [],
          'brokenheart': []
        });
      }
      $scope.heartflag = false;
      $scope.heart = function() {
        $scope.heartflag = true;
        $scope.brokenheartflag = false;
        // Push Heart
        $scope.$storage.userLoveList.heart.push({'dressID': dressID});
        // Remove BrokenHeart
        $scope.$storage.userLoveList.brokenheart = $filter('filter')($scope.$storage.userLoveList.brokenheart, {dressID: '!'+dressID});
      };
      $scope.brokenheartflag = false;
      $scope.brokenheart = function() {
        $scope.brokenheartflag = true;
        $scope.heartflag = false;
        // Push Broken Heart
        $scope.$storage.userLoveList.brokenheart.push({'dressID': dressID});
        // Remove Heart
        $scope.$storage.userLoveList.heart = $filter('filter')($scope.$storage.userLoveList.heart, {dressID: '!'+dressID});
      };
    }]);

ВЫХОД {{$storage | }} JSON

{
  "userLoveList": {
    "userID": "1",
    "heart": [
      {
        "dressID": "21",
        "dressID": "21", // Prevent Duplicates
        "dressID": "19"
      }
    ],
    "brokenheart": [
     {
        "dressID": "10"
     }
    ]
  }
}

Answer 1

Измените свой код примерно так:

fittingApp.controller('railsCtrl', ['$scope', '$localStorage', '$stateParams', function($scope, $localStorage, $stateParams) {
    $scope.$storage = $localStorage;
    var dressID = $stateParams.id;
    if ($scope.$storage.userLoveList === undefined) {
        var getUserID = $scope.$storage.profileData.userID;
        $scope.$storage.userLoveList = ({
            'userID': getUserID,
            'heart': [],
            'brokenheart': []
        });
    }

    function remove(list, value) {
        var index = list.indexOf(value);
        if (index > -1) {
            list.splice(index, 1);
        }
    }

    $scope.heartflag = $scope.$storage.userLoveList.heart.indexOf(dressID) > -1;
    $scope.brokenheartflag = $scope.$storage.userLoveList.brokenheart.indexOf(dressID) > -1;

    $scope.heart = function() {
        $scope.heartflag = true;
        $scope.brokenheartflag = false;
        // Push Heart
        $scope.$storage.userLoveList.heart.push(dressID);

        // Remove BrokenHeart
        remove($scope.$storage.userLoveList.brokenheart, dressID);
    };

    $scope.brokenheart = function() {
        $scope.heartflag = false;
        $scope.brokenheartflag = true;
        // Push Broken Heart
        $scope.$storage.userLoveList.brokenheart.push(dressID);
        // Remove Heart
        remove($scope.$storage.userLoveList.heart, dressID);
    };
}]);

Вот что происходит:

Сначала мы проверяем, есть ли у нас dressID в любом списке heart или же brokenheart так что мы можем отключить определенные кнопки. Теперь, поскольку мы уже отключили конкретную кнопку, пользователь не сможет нажать дважды.