Simple angular select option

Question

I can't get angular to display the contents of an array object.

Controller.js

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var items = [
            { id: 1, name: 'first obj', type: { open: true, name: 'Global' } },
            { id: 2, name: 'second obj', type: { open: true, name: 'Loco-l' } },
            { id: 3, name: 'third obj', type: { open: true, name: 'Global' } }           
  ];
  console.log(items)
});

template.html

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="eachItem" ng-options="item for item in myCtrl.items">
    <option value="">My default value</option>
  </select>
</div>

Here is the JSFiddle:

https://jsfiddle.net/reala/n5bg060t/4/

EDIT: I would like to display item.type.name , so two select fields will display "Global" then I'll eventually filter the results to show only unique values.

Answer 1

Here is your solution: jsfiddle .Use ng-options="item.type.name for item in items" to display corectly options in select and must use $scope.items insteed items.

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="eachItem" ng-options="item.type.name for item in items">
    <option value="">My default value</option>
  </select>
</div>

Answer 2

You must define your items in your $scope and change the ng-option for display name like this:

ng-options="item as item.type.name for item in items track by item.id"

DEMO

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.items = [ { id: 1, name: 'name of first object', type: { isImp: true, name: 'Global' } }, { id: 2, name: 'another alias of two', type: { isImp: true, name: 'Loco-l' } }, { id: 3, name: 'another alias of two', type: { isImp: true, name: 'Global' } } ]; console.log($scope.items) }); 

 <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="eachItem" ng-options="item as item.type.name for item in items track by item.id"> <option value="">My default value</option> </select> </div> 

Answer 3

do you want something like this?

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.items = [ { id: 1, name: 'first obj', type: { open: true, name: 'Global' } }, { id: 2, name: 'second obj', type: { open: true, name: 'Loco-l' } }, { id: 3, name: 'third obj', type: { open: true, name: 'Global' } } ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" > <div ng-controller="myCtrl"> <select ng-options="item as item.name for item in items track by item.id" ng-model="item.selected"> <option value="">My default value</option> </select> </div> </div> 

Answer 4

You should try...

HTML

<div ng-app="myApp" ng-controller="myCtrl as myCtrl">
  <select ng-model="eachItem" ng-options="item as item.type.name for item in myCtrl.items track by item.id">
    <option value="">My default value</option>
  </select>
</div>

CONTROLLER

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var myCtrl= this;
        myCtrl.items = [
                    { id: 1, name: 'first obj', type: { open: true, name: 'Global' } },
                    { id: 2, name: 'second obj', type: { open: true, name: 'Loco-l' } },
                    { id: 3, name: 'third obj', type: { open: true, name: 'Global' } }           
          ];
});