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.

you are mixing two definition styles here, but you haven't defined `items` in either. You have `$scope`, but aren't using it, and you are trying to use `myCtrl.items` but you aren't defining `myCtrl` (ControllerAs) nor are you making `items` a property of `myCtrl`. — Claies, Oct 17 '16 at 14:45
@TimBiegeleisen I would like to display the `item.type.name` , please see updated post. — bruh, Oct 17 '16 at 14:47
after you fix the issues with your variable declarations, you are going to need to re-think your dropdown. You can't populate the dropdown from the sub-items, you would end up with 3 rows for only 2 options. if you want to make an option list that filters this array, you should make a separate array of the possible options. — Claies, Oct 17 '16 at 14:50

Mihai Alexandru-Ionut · Answer 1 · 2016-10-17T14:49:41.467

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>

edited Oct 17 '16 at 14:49

answered Oct 17 '16 at 14:44

Mihai Alexandru-Ionut

47,092
13
101
128

Am I wrong in believing this ng-options syntax makes the most sense? – bruh Oct 17 '16 at 15:01
1

You can use 'track by $index' if your data source has duplicate identifiers.In this case there is no need. – Mihai Alexandru-Ionut Oct 17 '16 at 15:04
1

Here you can understand more here :http://stackoverflow.com/questions/22761340/understanding-the-ngrepeat-track-by-expression – Mihai Alexandru-Ionut Oct 17 '16 at 15:09
But,as I said, in your case is no need.Good luck !. – Mihai Alexandru-Ionut Oct 17 '16 at 15:12

Alexis · Accepted Answer · 2016-10-17T14:50:05.257

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>

Selecting this as the best answer as it corrects my wasteful use of `$scope` and may provide more context for future readers. — bruh, Oct 17 '16 at 15:38

score 1 · Answer 3 · answered Oct 17 '16 at 14:46

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>

Thanks. I see this "as for in track by" syntax used a lot, and it really confuses me. The fact that its used so much, I'm going to assume its entirely my lack of understanding. However, this solution works. Thank you — bruh, Oct 17 '16 at 15:00

defaultcheckbox · Answer 4 · 2016-10-17T15:27:45.600

1

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' } }           
          ];
});

edited Oct 17 '16 at 15:27

answered Oct 17 '16 at 14:47

defaultcheckbox

739
2
5
16

This looks like it makes sense to me - and really the approach I would prefer to take. However, I can't get this working when I store `myCtrl` in a variable and set it to `this`, then use `myCtrl.items` and attempt to access it inside ngOptions with `myCtrl.items` – bruh Oct 17 '16 at 15:06
yu need to use the controller as syntax... it's best not to put it in html but I did for this example – defaultcheckbox Oct 17 '16 at 15:28
@bruh I updated the answer so it would work for you using the way you reference your ngcontroller in your html. – defaultcheckbox Oct 17 '16 at 15:29

Simple angular select option

4 Answers4