angularjs - Angular: using ng-options properly -
am using ng-options
iterate through objects of {title: '', value: ''}
show title
in select list
, use value
in controller full object not vlaue. here view code:
<select class="form-control" ng-model="item.action" ng-options="option.title option in options"> </select>
controller code:
$scope.options = [{ title: 'title one', value: 'value one' }, { title: 'title two', value: 'value two' }]; $scope.item = {}; $scope.item.action= $scope.actio.value; // here getting obect title , value when want pull value
this way value
<html lang="en" ng-app='myapp'> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>my angularjs app</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css"> <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css"> <link rel="stylesheet" href="app.css"> --> <!-- core bootstrap css --> <link rel="stylesheet" href="app.css"> <!-- <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="components/version/version.js"></script> <script src="components/version/version-directive.js"></script> <script src="components/version/interpolate-filter.js"></script> --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> <!-- modules --> <script src="app.js"></script> </head> <body ng-controller ='maincontroller'> <div class ='container-fluid'> {{item.action}} <select class="form-control" ng-model="item.action" ng-options="option.value option.title option in options"> <option value= "" disabled="">select</option> </select> </div> <!-- container--> </div> <!-- production use <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> --> </body>
and js looks this
var myapp = angular.module('myapp', []); myapp.controller('maincontroller', ['$scope', function($scope) { $scope.options = [{ title: 'title one', value: 'value one' }, { title: 'title two', value: 'value two' }]; } ])
Comments
Post a Comment