AngularJS 在 select 菜单中显示多个值?
AngularJS display multiple values in select menu?
我有一个 select 菜单使用 Angular 1.5.11:
<select ng-model="abc.user.state" name="state" ng-options="option.code as option.name for option in abc.brStateSelect.options | orderBy: 'name' track by option.code"
class="form-control" required></select>
使用json如
[{ "id": 11, "name": "Rondônia", "code": "RO" }, { "id": 12, "name": "Acre", "code": "AC" }]
并且菜单正确显示 "name" 道具。但是我想显示两个道具:"name" 和 "code" 例如 Acre - AC
作为菜单项。
如何修改我的 ng-options 以将多个字段显示为标签?
你可以做到,
<select ng-model="abc.user.state" name="state" ng-options="option.name as option.name + '-' + option.code for option in datas | orderBy: 'name' track by option.code" class="form-control" required></select>
演示
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.datas =
[{ "id": 11, "name": "Rondônia", "code": "RO" }, { "id": 12, "name": "Acre", "code": "AC" }];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model="abc.user.state" name="state" ng-options="option.name as option.name + '-' + option.code for option in datas | orderBy: 'name' track by option.code"
class="form-control" required></select>
</body>
</html>
我有一个 select 菜单使用 Angular 1.5.11:
<select ng-model="abc.user.state" name="state" ng-options="option.code as option.name for option in abc.brStateSelect.options | orderBy: 'name' track by option.code"
class="form-control" required></select>
使用json如
[{ "id": 11, "name": "Rondônia", "code": "RO" }, { "id": 12, "name": "Acre", "code": "AC" }]
并且菜单正确显示 "name" 道具。但是我想显示两个道具:"name" 和 "code" 例如 Acre - AC
作为菜单项。
如何修改我的 ng-options 以将多个字段显示为标签?
你可以做到,
<select ng-model="abc.user.state" name="state" ng-options="option.name as option.name + '-' + option.code for option in datas | orderBy: 'name' track by option.code" class="form-control" required></select>
演示
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.datas =
[{ "id": 11, "name": "Rondônia", "code": "RO" }, { "id": 12, "name": "Acre", "code": "AC" }];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model="abc.user.state" name="state" ng-options="option.name as option.name + '-' + option.code for option in datas | orderBy: 'name' track by option.code"
class="form-control" required></select>
</body>
</html>