ng-model using ng-options to get property value

Question

Here is my code

var filter1 = { id: 96, name: "Affinity Groups Allowed In Site",typeId: 74, description: "SiteAffinityGroupsAllowed" };

var filter2 = { id: 125, name: "AffinityLob", typeId: 100, description: "AffinityLob" };

$scope.filterCriteriaObjets = [filter1, filter2];

I am trying to get the name using ng-model but it seems the ng model is getting the whole object . Here is my dropdown

<select class="form-control" name="role" ng model="filterCriteria.ObjectName"
ng-options="item as item.name for item in filterCriteriaObjets" ng-required="true" ng-change="getObjectInfo()">
<option value="">- Select Filter Name -</option>
</select>

But when I change the option filterCriteria.ObjectName is getting the whole object. I want the ng-model to be equals just the name property

Answer 1

here is what you can do...

 <select class="form-control" name="role" ng-model="filterCriteria.ObjectName"
    ng-options="item.name as item.name for item in filterCriteriaObjets" ng-required="true" ng-change="getObjectInfo()">
    <option value="">- Select Filter Name -</option>
    </select>

Answer 2

your error is declaring ng-model you declared it as ng model

 <!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="angular.js@1.4.x" 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"> <p>Hello {{name}}!</p> <select class="form-control" name="role" ng-model="filterCriteria.ObjectName" ng-options="item.name as item.name for item in filterCriteriaObjets" ng-required="true" ng-change="getObjectInfo()"> <option value="">- Select Filter Name -</option> </select> </body> <script> var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; var filter1 = { id: 96, name: "Affinity Groups Allowed In Site",typeId: 74, description: "SiteAffinityGroupsAllowed" }; var filter2 = { id: 125, name: "AffinityLob", typeId: 100, description: "AffinityLob" }; $scope.filterCriteriaObjets = [filter1, filter2]; }); </script> </html>

ng-model using ng-options to get property value

Question

2 answers

solution1
2 2016-12-15 08:16:19

solution2
0 2016-12-15 08:20:25

ng-model using ng-options to get property value

Question

2 answers

solution1 2 2016-12-15 08:16:19

solution2 0 2016-12-15 08:20:25

solution1
2 2016-12-15 08:16:19

solution2
0 2016-12-15 08:20:25