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指令即可。情况下。

查看工作：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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(item) {
    if(item.category == 'Movies') {
        item.gameSelected = false;
      item.movieSelected = true;
    } else {
        item.gameSelected = true;
      item.movieSelected = false;
    }
  };
}]);

更新了小提琴：https://jsfiddle.net/5zwsdbr0/

AngularJS - 多个下拉列表

2 个答案: