I am facing a challenge with using AngularJS to filter a JSON object into a select form element. Here is the current progress I have made. I am stuck and would appreciate any assistance.
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>