I have one select which show a list of objects and a button to show the object selected data. It works.
The problem is that I need to show more than the object name into the select box, I tried this but it return an 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 get it? do I have to create a directive for it?
Here my code which works without additional data into 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("selectec " + $scope.selected.name + ' with value ' + $scope.selected.value);
}
});<script src=".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>I have one select which show a list of objects and a button to show the object selected data. It works.
The problem is that I need to show more than the object name into the select box, I tried this but it return an 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 get it? do I have to create a directive for it?
Here my code which works without additional data into 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("selectec " + $scope.selected.name + ' with value ' + $scope.selected.value);
}
});<script src="https://ajax.googleapis./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>2 Answers
Reset to default 6You can't output HTML from the ngOptions AngularJS directive.
But you can customize the option content using a function to label the elements, like so (notice that the HTML is escaped):
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("selectec " + $scope.selected.name + ' with value ' + $scope.selected.value);
}
$scope.format = function(i) {
return i.name + '<span>Some nice data</span>';
};
});<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
<body>
<div ng-controller="Test">
<select data-ng-options="i as format(i) for i in items" ng-model="selected">
</select>
<button ng-click="show()">press</button>
</div>
</body>
</html>It's not valid to put HTML inside of an option tag for a select. You'll just need to create your own using DIV tags or whatever suits your needs. On another note you may want to rethink your UI as the purpose of a drowdown is not to be browsing data