Kavya Kavya - 4 months ago 31
AngularJS Question

How to save values from multiple select box which is populated using ng-repeat in angularjs?

I have a list of select boxes. On change of each select box, i need to save the selected option in a variable (can be array not sure). As of now I am able to save the selected value in a variable if there is only ONE select box. How do i do it if I have a group of select boxes which has been populated using ng-repeat? I am able to display the changed value (in the h4 tag on the page). But I want to save that value into a variable. How do I do that?

Link to Fiddle



var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.GetValue = function(value){
alert($scope.lengthPwd);
}

$scope.parameterList = [
{id:"one", text:'Is it red in color?', done:true},
{id:"two", text:'Is it square shaped?', done:false},
{id:"three", text:'Does it have vowels?', done:false},
{id: "four", text:'Allow Repeated characters?', done:true}
];

$scope.range = function(min, max, step){
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) input.push(i);
return input;
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">

<label>Enter the total length
<select class="form-control col-md-6" ng-change="GetValue()" ng-model="lengthPwd">
<option ng-repeat="n in range(1,100)">{{n}}</option>
</select>
</label>

<ul class="row unstyled cards col-md-offset-1">
<li class="col-lg-4 col-md-5 card" ng-repeat="parameter in parameterList">
<label id="sliderLabel">
<input type="checkbox" ng-model="parameter.done">
<span>{{parameter.text}}</span>
</label>
<select class="form-control" ng-hide="!parameter.done" ng-disabled="anyNum=='any'" ng-change="GetAllVal()" ng-model="test" disabled>
<option ng-repeat="n in range(1,100)">{{n}}</option>
</select>
<h4 id="{{parameter.id+test}}">{{parameter.id+test}}</h4>
</li>
</ul>
</div>
</body>




Answer

If I understood well your problem you want to get the values selected in the respective <select> right?

Point 1: I extremely recommend you to use ngOptions instead of ngRepeat. ngOptions was made exactly for <select> tag.

Point 2: ngRepeat creates its own scope so no longer you can access directly the ngModel inside it, then you should use preferably controller-as-syntax.

You can do it using ngModel as array, like this:

angular.module("app", [])
  .controller("mainCtrl", function() {
    var vm = this;

    vm.GetValue = function(value) {
      alert(vm.lengthPwd);
    }

    vm.parameterList = [  
       {  
          "id":"one",
          "text":"Is it red in color?",
          "done":true
       },
       {  
          "id":"two",
          "text":"Is it square shaped?",
          "done":false
       },
       {  
          "id":"three",
          "text":"Does it have vowels?",
          "done":false
       },
       {  
          "id":"four",
          "text":"Allow Repeated characters?",
          "done":true
       }
    ];

    vm.input = [];
    for (var i = 1; i <= 100; i++) {
      vm.input.push(i);
    }

    vm.set_value = function(index) {
      vm.parameterList[index].selectValue = vm.test[index];
    }
  })
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as main">
  <pre ng-bind="main.test | json"></pre>
  <ul class="row unstyled cards col-md-offset-1">
    <li class="col-lg-4 col-md-5 card" ng-repeat="parameter in main.parameterList track by $index">
      <label id="sliderLabel">
        <input type="checkbox" ng-model="parameter.done">
        <span ng-bind="parameter.text"></span>
      </label>
      <select class="form-control" ng-if="parameter.done" ng-options="n for n in main.input" ng-model="main.test[$index]" ng-change="main.set_value($index)" ng-disabled="anyNum == 'any'">
        <option value="">Select</option>
      </select>
      <h4 id="{{parameter.id+test}}" ng-bind="parameter.id + main.test[$index]"></h4>
    </li>
  </ul>
</body>

</html>

Comments