I have a dropdown menu that displays a list of objects and a button to show the selected object's data. It's functioning properly.
The issue I'm facing is that I want to display more than just the object name in the dropdown menu. When I tried adding additional data, it returned a string instead of a JSON object:
<select ng-model="selected">
<option ng-repeat="item in items" value="{{item}}">
{{item.name}} <span>Some nice data</span>
</option>
</select>
How can I accomplish this? Do I need to create a directive for it?
Here is my code which currently works without additional data in the select box
var app = angular.module('app', []);
app.controller('Test', function($scope) {
$scope.selected = null;
$scope.items = [{
name: 'a',
value: 1,
something: "xyz"
}, {
name: 'b',
value: 2,
something: "xyz"
}, {
name: 'c',
value: 3,
something: "xyz"
}]
$scope.show = function() {
alert("selected " + $scope.selected.name + ' with value ' + $scope.selected.value);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
<body>
<div ng-controller="Test">
<select data-ng-options="i.name for i in items" ng-model="selected">
</select>
<button ng-click="show()">press</button>
</div>
</body>
</html>