현재 버튼을 클릭 할 때마다 드롭 다운을 추가하는 버튼이있는 프로젝트에서 작업하고 있습니다.AngularJS - Multiple Dropdowns
버튼을 클릭하면 드롭 다운뿐만 아니라 추가 된 각 항목을 제거 할 수있는 "항목 제거"버튼이 표시됩니다.
드롭 다운에서 옵션을 선택하면 첫 번째 드롭 다운에서 선택한 항목에 따라 더 많은 옵션이있는 다른 드롭 다운이 표시됩니다.
드롭 다운에서 영화 또는 게임의 두 가지 옵션을 선택할 수 있습니다.
두 번째 드롭 다운에서 선택한 항목에 따라 동영상 목록이나 게임 목록이 표시됩니다.
HERE 현재 피들을 볼 수 있습니다.
index.html을 :
<div ng-app="myApp" ng-controller="testCtrl">
<button ng-click = "addNewItem()">Add new Item</button>
<div ng-repeat="item in itemSet.item track by $index">
<button ng-click = "removeItem($index)">Remove item</button>
<select ng-model="category"
ng-change="changeCategory(category)"
ng-options="category as category for category in categoryTypes">
<option></option>
</select>
<select ng-show="movieSelected"
ng-model="movieType"
ng-options="movie as movie for movie in movieCategories">
<option></option>
</select>
<select ng-show="gameSelected"
ng-model="gameType"
ng-options="game as game for game in gameCategories">
<option></option>
</select>
</div>
</div>
app.js :
이 잘못가는 몇 가지가 있습니다var myApp = angular.module('myApp', []);
myApp.controller('testCtrl', ['$scope', function ($scope) {
$scope.categoryTypes = ['Movies', 'Games'];
$scope.gameCategories = ['RPG', 'Sports'];
$scope.movieCategories = ['Action', 'SciFi'];
$scope.itemSet = { item : [] };
$scope.itemSet.item = [];
$scope.gameSelected = false;
$scope.movieSelected = false;
$scope.addNewItem = function() {
$scope.itemSet.item.push('');
};
$scope.removeItem = function (index) {
$scope.itemSet.item.splice(index, 1);
};
$scope.changeCategory = function(category) {
if(category == 'Movies') {
$scope.gameSelected = false;
$scope.movieSelected = true;
} else {
$scope.gameSelected = true;
$scope.movieSelected = false;
}
};
}]);
. 특별히 주문하지 않은 경우 :
예를 들어 3 개의 항목을 추가 한 다음 첫 번째 항목을 삭제하려면 3 번째 항목을 삭제 한 다음 두 번째 항목을 삭제하고 "항목 제거"를 계속 누르면 마지막 항목을 삭제합니다. 단추.
예를 들어 3 개의 항목을 추가하고 첫 번째 행의 첫 번째 드롭 다운에서 "movies"를 선택하면 모든 항목에 대한 영화 목록의 항목을 선택할 수있는 다른 모든 드롭 다운이 표시됩니다. 다른 행에서 아무것도 선택하지 않더라도.
또한 2 개의 항목을 추가하려는 경우 한 항목에서 첫 번째 영화를 선택하고 두 번째 항목에서 "게임"을 선택하면 "추가"드롭 다운에 대신 게임 목록이 표시됩니다 각각의 경우에 대한 품목 목록의
실제 프로젝트는 이와 유사하지만 4 개의 드롭 다운으로 작동하며 정보는 데이터베이스에서 제공되지만 피들과 함께 아이디어를 얻고 실제 프로젝트에 가능한 해결책을 제시하는 것으로 충분하다고 생각합니다.
누군가가이 문제에 대해 나를 도울 수 있다면 나는 매우 감사 할 것입니다.
가장 큰 문제입니다. – developer033