Angularjs push list elements to an array - angularjs

Question

It's a small memory game: the player has to remember a list of words and then he is presented with another list which contains few words from the original list where he has to decide if any of these words were present in the original list. For that he can click on 'Yes' or 'No' radio button.
<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>
In my controller I have:
$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=[]
The first array is the original array against which I have to check, second array is what I am presenting to the user right now, and third array might be the array where I push his choices.
It looks like following:
How can I implement this?

Answer 1

Update
Please see this updated plunker demo.
To populate the data dynamically onto the DOM, you can use ng-repeat. Please see the code on plunker.
<span ng-repeat="item in someArray">{{item}}</span>
To interpolate the looped item, use {{ }}.
Important : Just please avoid duplicate data on $scope.wordsPresent array coz it will produce error on ng-repeat.
Instead of pushing the "choices" at the end of the quiz/survey(?) why not push it every time the radio changes it's value? Push to array if yes is selected and remove from array if no is selected.
In that case you can use ng-change event to trigger the pushing and removing of data in the array, on the controller. You should take advantage of the 2 way data binding angularjs is offering.
You can then cross check your arrays.
Please see this plunker demo I created and I hope it will help you.

Answer 2

If you can make do with a library, I would suggest lodash.
_.intersection([2, 1], [2, 3]);
// ➜ [2]
Or in the context of your problem:
_.intersection($scope.words, [$scope.wordsPresent]);
// ➜ ['Sky', 'Germany', 'Rose', 'Garden']
https://lodash.com/docs#intersection

Answer 3

It seems to me if you want to check for correct answers, you need to do more than just compare arrays. Suppose they select "No" when something is actually in the list. First, I would put a key field on the items in my array so you are not so limited. Here is a working Plunker
Your data should probably look something like this:
$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'
}]
Then I would add an answer field (you could include it when you set up your data or you can include i after like this:
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';
})
}
Your HTML could look like this:
<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> <span>Incorrect Answers: {{wrong}}</span>
You selected:
<div ng-repeat="a in playerChoices">
<span>{{a.name}}</span> <span>{{a.answer}}</span>
</div>
</div>
<div align="center">
<button class="button button-dark" ng-click="pushToArray()">OK</button>
</div>
</div>
And in your controller:
$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;
}
Happy coding!