Showing posts with label Angularjs push list elements to an array. Show all posts
Showing posts with label Angularjs push list elements to an array. Show all posts

Angularjs push list elements to an array

Angularjs push list elements to an array


Hi Guys Today Discussed Angularjs push list elemetns to an array view list form data push array same method used ionic framework. controller data array push element angularjs push list elements to an array follows code.

Angularjs push list elements to an array
Angularjs push list elements to an array

var app = angular.module('angularjs-starter', []);

Controller

app.controller('MainCtrl', function($scope) {
   $scope.submitForm = function () {
       alert($scope.choicesMade);
   };

  $scope.radioValue = {};
   
  $scope.choicesMade = [];
  
  $scope.wordsPresent=['King', 'Garden', 'America', 'Sky', 'Potato', 'Germany', 'Rose', 'Whisky', 'Mumbai', 'Walk'];

  $scope.pushToArray = function(item) {
    if ($scope.choicesMade.indexOf($scope.radioValue[item]) > -1) {
      alert("already in choices");
      return;
    }
    $scope.choicesMade.push($scope.radioValue[item]);
  }

  $scope.removeFromArray = function(item) {
    
    var index = $scope.choicesMade.indexOf($scope.radioValue[item].substring(1));
    if (index > -1) {
      $scope.choicesMade.splice(index, 1);  
    }
    

  }
});
html page

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
          <div ng-repeat="item in wordsPresent">
            <b>{{ item }}</b><br>
            <label><input type="radio" name="name_{{item}}" ng-change="pushToArray(item)" ng-model="radioValue[item]" value="{{item}}"/> Yes</label>
           <label><input type="radio" name="name_{{item}}" ng-change="removeFromArray(item)" ng-model="radioValue[item]" value="_{{item}}"/> No</label>
          </div>
           <pre>{{choicesMade}}</pre>
  </body> 

</html>