比較兩個數組，並使用ng樣式在數組中標記相同的條目

Question

我有一個列表，顯示從一個分貝的單詞查詢，從那裏我可以點擊一個單詞，它被推到另一個列表，我可以保存比。有了這個，我可以創建不同的詞彙表。我想要做的是給這些單詞另一種顏色，如果我已經把它們推到我的新名單上。

爲此，我使用我的控制器中的函數來比較兩個列表與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' }" 

我遍歷詞的查詢（searchWords），並與addWordtoSet（字）我把它們推到我的其他陣列（這偉大工程） 。根據isInside函數的if語句，isInside（word）將執行angular.foreach來比較兩個數組，並且ng樣式應該提供不同的樣式。

控制器

$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推送的數組

會發生什麼情況是，searchword數組上的一個單詞獲取綠色（以及+1的集合，因此如果arraypos。0中的單詞恰好是arraypos 。1獲得綠色）。

我懷疑我用ng-class元素做了所有的錯誤，但我沒有找到另一個很好的機會來獲得word._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

我和一個朋友坐在一起，我們想出了這個問題的一個工作版本，所以這裏是萬一有人解決方案也有類似的問題和手。

在Controller我們使用了以下功能：

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

它使用的foreach比較陣列，如果有IDS是一個匹配的發現布爾返回true。

在查看我們使用了以下內容：

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

它使用標記或無標記的CSS類，在我的情況，着色爲綠色匹配的單詞（標記）。所有其他的詞都是背景色爲白色。

這裏是CSS：

.marked { 
    background: $lightgreen; 
} 

.unmarked { 
    background: $nicewhite; 
} 

在我來說，我使用SCSS和colorvariables，但你當然可以使用所有其他的顏色，如紅色;或#fff。這個結果是兩個數組是視圖。第一個是來自DB的搜索查詢，顯示所有單詞。第二個是一個新的數組，您可以通過單擊其中一個單詞來推動單詞。如果你這樣做，這個詞被推動，並獲得綠色背景。那就是它，我希望這是很好的信息。

Answer 2

嘗試

$scope.choosenWords.value = 'exist'; 

在控制器的啓動也初始化choosenWords。

如果這不起作用，請檢查ng模塊執行的優先順序。

控制器是否通過局部初始化？

Answer 3

您可以將同一個函數中的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}" }"