Angularjs將列表元素推送到陣列

Question

這是一個小型記憶遊戲：玩家必須記住單詞列表，然後他會看到另一個列表，其中包含原始列表中的幾個單詞，他必須決定是否有任何單詞這些詞出現在原始列表中。爲此，他可以點擊「是」或「否」單選按鈕。

<div align="center" ng-show="showWords" style="margin-bottom:1cm;"> 
    <div ng-repeat="word in words"> 
     <h4>{{word}}</h4> 
    </div> 
    </div> 
<div align="center" ng-show="showTest" style="margin-bottom:1cm;"> 
    <div ng-repeat="word in wordsPresent | limitTo:limitTo"> 
     <h4>{{word}}</h4> 
     <label> 
     <input type="radio" value="yes"> 
     Yes 
     </label><br/> 
     <label> 
     <input type="radio" ng-value="no"> 
     No 
     </label><br/> 
    </div> 
</div> 
    ... 
<div align="center" ng-if="showOk"> 
    <button class="button button-dark" ng-click="pushToArray()">OK</button> 
</div> 

在我的控制，我有：

$scope.words=['Okra', 'Musa', 'Sky', 'India', 'Rose', 'Titanic', 'Onion', 'Germany', 'Beer', 'Run', 'Garden', 'Mountain'] 
$scope.wordsPresent=['King', 'Garden', 'America', 'Sky', 'Potato', 'Germany', 'Rose', 'Whisky', 'Mumbai', 'Walk'] 

$scope.playerChoices=[] 

第一個數組是原始數組對我有檢查，第二陣是什麼，我呈現給用戶，現在，第三排可能是我推動他的選擇的陣列。 它看起來像以下：

我如何能實現呢？

Answer 1

更新

請參閱本更新plunker demo。

要將數據動態地填充到DOM上，您可以使用ng-repeat。請參閱plunker上的代碼。

<span ng-repeat="item in someArray">{{item}}</span> 

爲interpolate環狀項，請使用{{ }}。

重要：只是請避免$scope.wordsPresent陣列重複數據怎麼把它將會對ng-repeat錯誤。

---

而是按下「選擇」在測驗/調查結束的（？）爲什麼不推在每次無線電改變它的價值的時間呢？如果選擇「是」，則推入數組，如果選擇「否」，則從數組中移除。

在這種情況下，您可以使用ng-change事件觸發控制器上數組中數據的推送和刪除。您應該利用angularjs提供的2種數據綁定方式。

然後你可以交叉檢查你的數組。

請看這plunker demo我創建了，我希望它能幫助你。

Answer 2

如果你可以做一個圖書館，我會建議lodash。

_.intersection([2, 1], [2, 3]); 
// ➜ [2] 

或者在你的問題的情況下：

_.intersection($scope.words, [$scope.wordsPresent]); 
// ➜ ['Sky', 'Germany', 'Rose', 'Garden'] 

https://lodash.com/docs#intersection

Answer 3

在我看來，如果你想檢查正確的答案，你需要做的不僅僅是比較數組。假設他們選擇「否」時，實際上是在列表中的東西。首先，我會在我的陣列中的物品上放置一個關鍵字段，以便您不受限制。這是一個工作Plunker

您的數據或許應該是這個樣子：

$scope.words = [{ 
    id: 11, 
    name: 'Okra' 
}, { 
    id: 12, 
    name: 'Musa' 
}, { 
    id: 4, 
    name: 'Sky' 
}, { 
    id: 13, 
    name: 'India' 
}, { 
    id: 14, 
    name: 'Rose' 
}, { 
    id: 15, 
    name: 'Titanic' 
}, { 
    id: 16, 
    name: 'Onion' 
}, { 
    id: 6, 
    name: 'Germany' 
}, { 
    id: 17, 
    name: 'Beer' 
}, { 
    id: 18, 
    name: 'Run' 
}, { 
    id: 2, 
    name: 'Garden' 
}, { 
    id: 19, 
    name: 'Mountain' 
}] 
$scope.wordsPresent = [{ 
    id: 1, 
    name:'King' 
}, 
{ 
    id: 2, 
    name: 'Garden' 
}, { 
    id: 3, 
    name: 'America' 
}, { 
    id: 4, 
    name: 'Sky' 
}, { 
    id: 5, 
    name: 'Potato' 
}, { 
    id: 6, 
    name: 'Germany' 
}, { 
    id: 7, 
    name: 'Rose' 
}, { 
    id: 8, 
    name: 'Whisky' 
}, { 
    id: 9, 
    name: 'Mumbai' 
}, { 
    id: 10, 
    name: 'Walk' 
}] 

然後我想補充一個答案場（你可以將它包括在設置你的數據，或者你也可以在像包括我這樣的：

setAnswers(); 
function setAnswers() { 
    angular.forEach($scope.wordsPresent, function (value, key) { 
     $scope.wordsPresent[key].answer = 'no'; 
    }); 
    angular.forEach($scope.words, function (value, key) { 
     $scope.words[key].answer = 'yes'; 
    }) 
} 

你的HTML可能看起來像這樣：

<div ng-app="myModule" ng-controller="HomeCtrl"> 
    <div align="center" style="margin-bottom:1cm;"> 
     <div ng-repeat="word in wordsPresent | limitTo:limitTo"> 
      <h4>{{word.name}}</h4> 

       <input type="radio" ng-model="word.answer" value="yes"> 
       Yes 
      <br /> 

       <input type="radio" ng-model="word.answer" value="no"> 
       No 
      <br /> 
     </div> 
    </div> 
    <div ng-show="showAnswers"> 
     <span>Correct Answers: {{correct}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>Incorrect Answers: {{wrong}}</span> 
     You selected: 
     <div ng-repeat="a in playerChoices"> 
      <span>{{a.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{a.answer}}</span> 

     </div> 
    </div> 

    <div align="center"> 
     <button class="button button-dark" ng-click="pushToArray()">OK</button> 
    </div> 
</div> 

並在你的控制器中：

$scope.pushToArray = function() { 
    $scope.correct = 0; 
    for (var i = 0; i < $scope.wordsPresent.length; i++) { 
      $scope.playerChoices.push($scope.wordsPresent[i]); 

    } 

    $scope.showAnswers = true; 
    $scope.correct = correctAnswers($scope.playerChoices, $scope.words); 

} 
function correctAnswers(checkerArray, targetArray) { 
    correct = 0; 
    wrong = 0; 
    for (var i = 0; i < checkerArray.length; i++) { 
     if (checkerArray[i].answer == 'yes') { 

      if (containsObject(checkerArray[i], targetArray) == true) { 
       correct = correct + 1; 
      } 
     } 
     else if (checkerArray[i].answer = 'no') { 

      if (containsObject(checkerArray[i], targetArray) == false) { 
       correct = correct + 1; 
      } 
     } 

    } 
    return correct; 
} 
function containsObject(obj, list) { 
    var i; 
    for (i = 0; i < list.length; i++) { 
     if (list[i].id === obj.id) { 
      return true; 
     } 
    } 

    return false; 
} 

快樂編碼！