AngularJS - Несколько выпадающих списков

Question

В настоящее время я работаю над проектом, где у меня есть кнопка, которая добавляет выпадающий список каждый раз, когда вы нажимаете на кнопку.

При нажатии на кнопку отображается не только раскрывающийся список, но также кнопка «Удалить элемент», где вы можете удалить соответствующий элемент.

Затем, если вы выберете опцию из раскрывающегося списка, она отобразит другое раскрывающееся меню с большим количеством опций, в зависимости от того, что вы выбрали в первом выпадающем меню.

Вы можете выбрать из раскрывающегося списка два варианта, фильмы или игры.

А затем во втором выпадающем списке должен появиться список фильмов или список игр в зависимости от того, что вы выбрали.

Вы можете увидеть 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 элемента, и, например, я выбираю «фильмы» из первого раскрывающегося списка в первой строке, он отображает все остальные выпадающие списки с возможностью выбора элементов из списка фильмов на всех из них, даже если я ничего не выбрал из других строк.

Также, если вы хотите добавить, скажем, 2 пункта, в одном элементе вы выбираете первые «фильмы», а затем на втором вы выбираете «игры», «дополнительные» выпадающие списки покажут список игр соответствующего перечня предметов для каждого из случаев.

Фактический проект работает аналогично этому, но с 4 выпадающими меню, и информация поступает из базы данных, но я думаю, что с помощью Fiddle должно быть достаточно, чтобы получить идею и принять возможное решение для реального проекта.

Если кто-то может помочь мне в этом, я буду очень благодарен!

Answer 1

Ваш code имеет проблемы большой что: у вас есть один и тот же ngModel для всех элементов в ngRepeat.

После этого вы можете значительно упростить свой code.

Вам не нужно использовать ngChange знать, что category является выбран, вы можете просто использовать ngSwitch директиву, что хорошо подходит в данном случае.

Посмотреть работает:

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('myApp', []) 
 
    .controller('testCtrl', testCtrl); 
 

 
    testCtrl.$inject = ['$scope']; 
 

 
    function testCtrl($scope) { 
 
    $scope.categoryTypes = ['Movies', 'Games']; 
 

 
    $scope.gameCategories = ['RPG', 'Sports']; 
 
    $scope.movieCategories = ['Action', 'SciFi']; 
 

 
    $scope.itemSet = { 
 
     item: [] 
 
    }; 
 

 
    $scope.addNewItem = function() { 
 
     $scope.itemSet.item.push({}); 
 
    }; 
 

 
    $scope.removeItem = function(index) { 
 
     $scope.itemSet.item.splice(index, 1); 
 
    }; 
 
    } 
 
})();

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <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="item.category" 
 
       ng-options="category for category in categoryTypes"> 
 
     <option value hidden>Select a category</option> 
 
     </select> 
 
     <span ng-switch="item.category"> 
 
     <select ng-switch-when="Movies" 
 
       ng-model="item.movie" 
 
       ng-options="movie for movie in movieCategories"> 
 
     <option value hidden>Select a movie</option> 
 
     </select> 
 
     <select ng-switch-when="Games" 
 
       ng-model="item.game" 
 
       ng-options="game for game in gameCategories"> 
 
     <option value hidden>Select a game</option> 
 
     </select> 
 
     </span> 
 
    </div> 
 
    <pre ng-bind="itemSet.item | json"></pre> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 2

Основная проблема заключается в том, что вы - элементы управления, привязаны к значениям $ scope вместо отдельных элементов, которые вы пытаетесь манипулировать. Вторая проблема заключается в том, что вы инициализируете каждый новый массив как пустую строку '' вместо объекта {}.

Это будет работать:

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="item.category" 
      ng-change="changeCategory(item)" 
      ng-options="category as category for category in categoryTypes"> 
    <option></option>  
    </select> 

    <select ng-show="item.movieSelected" 
      ng-model="movieType" 
      ng-options="movie as movie for movie in movieCategories"> 
    <option></option>  
    </select> 

    <select ng-show="item.gameSelected" 
      ng-model="gameType" 
      ng-options="game as game for game in gameCategories"> 
    <option></option>  
    </select> 
    </div> 
</div> 

приложение.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(item) { 
    if(item.category == 'Movies') { 
     item.gameSelected = false; 
     item.movieSelected = true; 
    } else { 
     item.gameSelected = true; 
     item.movieSelected = false; 
    } 
    }; 
}]); 

Обновлено скрипку: https://jsfiddle.net/5zwsdbr0/