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 — CD..
– CD.., Commented Jan 28, 2014 at 7: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
– toddsby, Commented Jan 29, 2014 at 16:03

hassassin · Accepted Answer · 2014-01-28 07:31:28Z

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, 2014 at 7:31

hassassin

5,0641 gold badge32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

toddsby Over a year ago

Thanks! This answers my question exactly. I think AngularJS Value Attribute for select clarifies that it was working correctly all along, I was just confused about the result I was seeing in browser (HTML)

Silvio · Accepted Answer · 2014-03-28 17:26:17Z

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, 2014 at 17:26

Silvio

6,0662 gold badges19 silver badges16 bronze badges

2 Comments

MarzSocks Over a year ago

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)

Silvio Over a year ago

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'. jsfiddle.net/to4n3xf1

Collectives™ on Stack Overflow

filtering a json object with ng-options angular js

app.js:

singlepageapp.html:

current result:

desired result:

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

app.js:

singlepageapp.html:

current result:

desired result:

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related