CODEWITHSUNDEEP
angularjs
Ahmad Elmoualem
Ahmad Elmoualem

Reputation: 325

Angular: using ng-options properly

Am using ng-options to iterate through objects of {title: '', value: ''} to show the title in the select list and use the value in the controller but i get the full object not the vlaue. here is the view code:

  <select class="form-control" ng-model="item.action" ng-options="option.title for 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 am getting the obect title and value when i want to pull only the value

Upvotes: 1

Views: 207

Answers (3)

Mateen Kadwaikar
Mateen Kadwaikar

Reputation: 403

This is the way you get the 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 as option.title for option in options">
                    <option value= "" disabled="">select</option>
                </select>
            </div>
            <!-- container--> </div>
            <!-- for production use
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
        </body>

And you js looks like 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'
        }];



    }
])

Upvotes: 1

Konammagari
Konammagari

Reputation: 364

The way you are using assigns selected item to the ng-model , rather If you want to assign particular value from the selected item, use as mentioned below :

<select class="form-control" ng-model="item.action" ng-options="option.value as option.title for option in options"></select>

Upvotes: 0

Tong Shen
Tong Shen

Reputation: 1367

According to https://docs.angularjs.org/api/ng/directive/ngOptions#-select-as-and-track-by- , you can try:

<select class="form-control" ng-model="item.action" ng-options="option.value as option.title for option in options">
</select>

Upvotes: 0

Related Questions