filtering a json object with ng-options angular js

Question

I'm having trouble using AngularJS to filter a json object into a select form element. Here's what I've got so far. I'm stumped, any help would be appreciated.

app.js:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.showItems = null;
  $scope.items = [
    { id: '023', name: 'foo' },
    { id: '033', name: 'bar' },
    { id: '010', name: 'blah' }];
});

singlepageapp.html:

<html data-ng-app="app">
  <body data-ng-controller="MainCtrl">
    <form>
    <select data-ng-model="showItems" data-ng-options="item as item.name for item in items"></select>
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

current result:

<select data-ng-model="selectedItem" ng-options="item as item.name for item in items" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="0">foo</option>
    <option value="1">bar</option>
    <option value="2">blah</option>
</select>

desired result:

<select data-ng-model="selectedItem" ng-options="item as item.name for item in items" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="023">foo</option>
    <option value="033">bar</option>
    <option value="010">blah</option>
</select>

possible duplicate of [AngularJS - value attribute for select](http://stackoverflow.com/questions/13803665/angularjs-value-attribute-for-select) — CD.., Jan 28 '14 at 07:04
@CD.. YES! The way ng-options works is quite confusing, this helps clarify that the value isn't reflected in the html, but is returned when selected. — toddsby, Jan 29 '14 at 16:03

score 1 · Accepted Answer · answered Jan 28 '14 at 07:31

1

You can always just repeat over options in the html and not use data-ng-options. I've made a fiddle that does what you want: http://jsfiddle.net/5MQ9L/

<select ng-model="selected">
    <option value="{{item.id}}" ng-repeat="(i,item) in items"> {{item.name}}
    </option>
</select>

This way you can set the values directly with scoped vals.

Hope this helped!

answered Jan 28 '14 at 07:31

hassassin

5,024
1
29
38

Thanks! This answers my question exactly. I think [AngularJS Value Attribute for select](http://stackoverflow.com/a/13808743/3150543) clarifies that it was working correctly all along, I was just confused about the result I was seeing in browser (HTML) – toddsby Jan 29 '14 at 16:08

score 0 · Answer 2 · answered Mar 28 '14 at 17:26

0

You should have specified the item.id

<select ng-model="selected" ng-options='item.id as item.name for item in items'>               </select>

From http://docs.angularjs.org/api/ng/directive/select

Note: ngOptions provides an iterator facility for the element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present.

I updated the jsFiddle http://jsfiddle.net/5MQ9L/1/

answered Mar 28 '14 at 17:26

silvio

5,651
2
17
14

If you look at your jsFiddle example, why does your dropdown have an empty list item initially - and how do you get rid of it? (it goes away after you choose something) – MarzSocks Nov 17 '14 at 14:42
This happens because the $scope.selected was set to '' (empty) but no item on the array of items has an id with such value. To fix, initialize $scope.selected to a valid item, such as '023'. http://jsfiddle.net/to4n3xf1/ – silvio Nov 17 '14 at 22:22

filtering a json object with ng-options angular js

app.js:

singlepageapp.html:

current result:

desired result:

2 Answers2