Сравните два массива и с помощью ng-style отметьте одинаковые записи в массивах.

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

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

Вот мой код:

Просмотреть

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

Я перебираю слова query (searchWords) и с помощью addWordtoSet(word) помещаю их в свой другой массив (это прекрасно работает). isInside(word) выполнит angular.foreach для сравнения двух массивов, а стиль 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 другим способом. Я сделал что-то явно не так здесь?

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

ОБНОВЛЕНИЕ

Он прекрасно работает с функцией 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)" для этого?


javascript arrays angularjs ng-class ng-style
person d8ta    schedule 26.11.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

$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}" }"
person Sravan    schedule 26.11.2016
comment
Звучит очень красиво. Сам думал в этом направлении но не сложилось. Ваше решение имеет абсолютный смысл, но почему-то только одно слово зеленое, и это всегда слово, которое я нажимаю + 1, поэтому я думаю, что мне нужно проверить мой запрос, если здесь что-то не так. - person d8ta; 28.11.2016
comment
в чем проблема, которую вы получаете сейчас? - person Sravan; 28.11.2016
comment
Он показал только неправильное слово, отмеченное во внешнем интерфейсе, я дам ответ, как мне это сделать, в конце - person d8ta; 29.11.2016
comment
да, но я придумал еще одну действительно хорошую рабочую версию, я разместил ее здесь в конце как ответ. Но спасибо за информацию. С вашей информацией я мог бы решить эту проблему, немного изменив ее и протестировав. Так что большое спасибо! - person d8ta; 29.11.2016

arrow_upward
0
arrow_downward

Пытаться

$scope.choosenWords.value = 'exist';

Также инициализируйте selectedWords в начале контроллера.

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

Контроллер инициализируется через партиал?

person user3086298    schedule 26.11.2016
comment
если я использую selectedWords без объекта, я получаю TypeErrors, что значение не установлено. Что вы имеете в виду под инициализацией через частичное и как проверить порядок приоритета для ng-модулей? - person d8ta; 26.11.2016
comment
Я полагаю, что некоторое время назад была ошибка, когда контроллер был установлен как часть частичного, это ионы назад ... приоритет используется для сортировки директив до их компиляции, проверки угловых документов ... - person user3086298; 26.11.2016
comment
Вложенные шаблоны, называемые частичными - person user3086298; 26.11.2016

arrow_upward
0
arrow_downward

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

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

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

Он использует foreach для сравнения массивов, и если есть совпадающие идентификаторы, найденное логическое значение возвращает true.

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

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

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

вот CSS:

.marked {
  background: $lightgreen;
}

.unmarked {
  background: $nicewhite;
}

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

person d8ta    schedule 29.11.2016