Nitish Nitish - 1 year ago 74
AngularJS Question

Angularjs push list elements to an array

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">
<div align="center" ng-show="showTest" style="margin-bottom:1cm;">
<div ng-repeat="word in wordsPresent | limitTo:limitTo">
<input type="radio" value="yes">
<input type="radio" ng-value="no">
<div align="center" ng-if="showOk">
<button class="button button-dark" ng-click="pushToArray()">OK</button>

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']


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:

enter image description here

How can I implement this?

Answer Source


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download