多个下拉通过ng选项不工作。

We are making multiple dropdown through ng-options in a form but if we change one dropdown the selected value is assgined to the other dropdown as well.

我们正在通过一个表单的ng选项进行多个下拉，但是如果我们改变一个下拉，所选的值也会被另一个下拉列表所接受。

<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 code:

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

    };
}]);

1 个解决方案

#1

I changed your code as follows. Hope this will work.

我改变了你的代码如下。希望这将工作。

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

};
}]);

view

视图

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

#1