我们通过ng-options
以一种形式进行多个下拉菜单,但是如果我们更改一个下拉菜单,则所选值也会与另一个下拉菜单匹配。通过ng-option不起作用的多个下拉菜单
<div ng-app="SelectApp">
<div ng-controller="selectController">
<select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"
ng-options="category.name group by category.group for category in categories">
</select>
<select name="category-group" id="categoryGroup2" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"
ng-options="category.name group by category.group for category in categories">
</select>
</div>
JS代码:
'use strict';
var app = angular.module('SelectApp', [ ]);
app.controller('selectController', ['$scope', '$window', function ($scope, $window) {
$scope.categories = [
{ id: 0, name: "Select a category..."},
{ id: 1, name: "Cars", group : "- Vehicles -" },
{ id: 2, name: "Commercial vehicles", disabled: false,group : "- Vehicles -" },
{ id: 3, name: "Motorcycles", disabled: false, group : "- Vehicles -" },
{ id: 4, name: "Car & Motorcycle Equipment", disabled: false,
group : "- Vehicles -" },
{ id: 5, name: "Boats", disabled: false, group : "- Vehicles -" },
{ id: 6, name: "Other Vehicles", disabled: false, group : "- Vehicles -" },
{ id: 7, name: "Appliances", disabled: false , group : "- House and Children -" },
{ id: 8, name: "Inside", disabled: false,group : "- House and Children -" },
{ id: 9, name: "Games and Clothing", disabled: false,group : "- House and Children -" },
{ id: 10, name: "Garden", disabled: false,group : "- House and Children -" }
];
$scope.itemSelected = $scope.categories[0];
$scope.onCategoryChange = function() {
$window.alert("Selected Value: " + $scope.itemSelected.id + "\nSelected Text: " + $scope.itemSelected.name);
};
}]);
您使用的是相同的NG-模型有两个下拉菜单,所以角度更新值到它的模型。 (ng-model =“itemSelected”) –
对于每个选择框使用单独的模型 –
感谢您的快速响应,但这些下拉列表来自某个后端系统的ng-repeat。我想要在不同的下拉菜单中设置不同的值, – ASHU