CODEWITHSUNDEEP
javascriptangularjscordovaionic-framework
sam
sam

Reputation: 698

How to bind values using ng-model

I am working on an app where I am facing this similar issue. I am dynamically creating select boxes based on API response. I dont understand how to bind these values in controller. Code for reference is

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   // how to get values of input boxes here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model= "What_Should_Go_Here" ng-repeat="x in [10,11,22,33]">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
{{What_Should_Go_Here}}
</div>

Upvotes: 0

Views: 59

Answers (2)

Sravan
Sravan

Reputation: 18647

Initialize an empty object selected = {}

Then, loop the select boxes using ng-repeat, and inside each select box, use ng-options to get the options for the select.

Now, for each selected value from every select, ng-model="selected[y]" pushes the current select value into selected object with the key of select tag.

So, after selecting all the selects, the selected object looks loke,

{"1":11,"2":10,"3":22,"4":22}

Please run the below Code

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selected[y]" ng-options="x for x in data" ng-repeat="y in selects" ng-change="selectedFunc(y)">
</select>
<br><br>
Selected Values: {{selected}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selected = {};
$scope.selects = [1,2,3,4]
$scope.data = [10,11,22,33]


$scope.selectedFunc = function(y)
{
 alert($scope.selected[y])
}

    
});
</script>


</body>
</html>

Here is a working DEMO

Upvotes: 1

user7760518
user7760518

Reputation:

use a select box with ng-change method and pass the model value to that change function like below.....so that you can access the selected item in js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.array=[10,11,22,33];//assuem it as your db result 
  $scope.fix=function(val){
    console.log(val);
  }
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <select ng-model= "x" ng-options="x as x for x in array" ng-change="fix(x)"</select>
  {{x}}
  </body>

</html>

Upvotes: 0

Related Questions