Сравнение двух массивов и использование ng-стиля для отметки равных записей в массивах

Question

У меня есть список, который показывает запрос слов из db, оттуда я могу щелкнуть по одному слову, и он попадает в другой список, который я могу сохранить, чем. С этим я могу создавать разные списки слов. То, что я хочу сделать, - это дать словам другой цвет, если я уже подтолкнул их к новому списку.

Для этого я использую функцию в своем контроллере для сравнения двух списков с угловыми и передними. Если wordFromQuery._id === wordOnNewList._id, я дал слова другого цвета фона с ng-style.

Вот мой код:

Посмотреть

ng-repeat="word in searchWords" ng-click="addWordToSet(word)" ng-class="isInside(word)" ng-style="{ background: choosenWords.value == 'exist' ? 'lightgreen' : 'white' }" 

Я перебрать слов запроса (searchWords) и с addWordtoSet (слово) я подталкивать их к моему другому массиву (это работает отлично) , isInside (слово) будет выполнять угловое вычисление. Прежде чем сравнивать два массива, а стиль ng должен предоставлять разные стили в соответствии с if-выражением функции isInside.

Контроллер

$scope.isInside = function (word) { 
     angular.forEach($scope.currentWordlist, function (item) { 
     if (item._id === word._id) { 
      $scope.choosenWords = {value: 'exist'}; 
     } else { 
      $scope.choosenWords = {value: 'notOnList'}; 
     } 
     }); 
    }; 

angular.forEach сравнивает слова из обоих массивов. currentWordList - это массив, в котором я нажимаю addWordToSet

Что происходит, так это то, что одно слово в массиве поискового запроса получает зеленый цвет (и его набор от +1, поэтому, если слово в массиве 0 будет правильным, 1 получает зеленый цвет).

Я подозреваю, что я сделал все это неправильно с элементом ng-class, но я не нашел еще одной хорошей возможности получить слово._id другим способом. Я сделал что-то явно неправильно здесь?

Буду признателен советы или подсказки. Благодаря!

UPDATE

Она работает довольно хорошо с функцией addWordToSet:

 $scope.addWordToSet = function (word) { 
     var exists = false; 
     angular.forEach($scope.currentWordlist, function (item) { 
      if (item._id === word._id) { 
      exists = true; 
     } 
     }); 
     if (exists === false) { 
      $scope.currentWordlist.push(word); 
     } 
     }; 

Единственное, что мне нужно я думаю, что делает это не по щелчку, но сразу, не нажимая ничего. my ng-class="isInside(word)" правильный выбор для этого?

Answer 1

Я сидел вместе с другом, и мы пришли к рабочей версии этой проблемы, так вот решение в случае, если кто-то имеет аналогичный проблема и рука.

В контроллере мы использовали следующую функцию:

$scope.isSelected = function (word) { 
     var found = false; 
     angular.forEach($scope.currentWordlist, function (item) { 
     if (item._id === word._id) { 
      found = true; 
     } 
     }); 
    return found; 
    }; 

Он использует Еогеасп для сравнения массивов и если есть идентификаторы, которые спичка обнаруженное BOOL возвращает истину.

В представлении мы использовали следующее:

ng-class="isSelected(word) ? 'marked' : 'unmarked'" 

, который использует отмеченный или немаркированный класс CSS для, в моем случае, раскраски совпавших слов в зеленом (маркированный). Все остальные слова получают белый цвет фона.

вот CSS:

.marked { 
    background: $lightgreen; 
} 

.unmarked { 
    background: $nicewhite; 
} 

В моем случае я использую SCSS и colorvariables, но вы можете, конечно, использовать все другие цвета, такие как красный; или #fff. Результатом этого являются два массива, которые являются представлениями. Первый - это поисковый запрос из БД, который показывает все слова. Второй - это новый массив, в котором вы можете нажать слова, щелкнув одно из слов. Если вы это сделаете, слово будет нажато, и он получит зеленый фон. Thats it, я надеюсь, что это хорошая информация.

Answer 2

Попытка

$scope.choosenWords.value = 'exist'; 

Кроме инициализации choosenWords на старте контроллера.

Если это не работает, проверьте порядок приоритета выполнения модулей ng.

Является ли контроллер инициализирован через частичный?

Answer 3

Вы можете назначить colorvariable внутри той же функции и использовать его в представлении.

$scope.isInside = function (word) { 
    angular.forEach($scope.currentWordlist, function (item) { 
    if (item._id === word._id) { 
     $scope.choosenWords = {value: 'exist'}; 
     $scope.color = 'lightgreen' 
    } else { 
     $scope.choosenWords = {value: 'notOnList'}; 
     $scope.color = 'white' 
    } 
    }); 
}; 

ng-style="{'background-color':color}"

Вид:

ng-repeat="word in searchWords" ng-click="addWordToSet(word)" ng-class="isInside(word)" ng-style="{'background-color':color}" }"