通過ng-option不起作用的多個下拉菜單

Question

我們通過ng-options以一種形式進行多個下拉菜單，但是如果我們更改一個下拉菜單，則所選值也會與另一個下拉菜單匹配。

<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); 

    }; 
}]);  

Answer 1

我改變你的代碼如下所示。希望這會起作用。

app.js

$scope.itemSelected = $scope.categories[0]; 
$scope.itemSelected1 = $scope.categories[0]; 
$scope.onCategoryChange = function (item,index) { 

    $window.alert("Selected Value: " + item.id + "\nSelected Text: " + item.name); 

}; 
}]); 

視圖

<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="categoryGroup" class="form-control" ng-model="itemSelected1"           ng-change="onCategoryChange(itemSelected1)" 
    ng-options="category.name group by category.group for category in categories"> 

</select> 

</div>