如何在Angular中创建相关的下拉选择项？

47 浏览
0 Comments

如何在Angular中创建相关的下拉选择项？

我有两个选择列表的HTML。\n我如何使它们相关联？我的意思是，当我从第一个选择列表中选择一个选项时，第二个选择列表中的某些选项将被显示或隐藏？\n选择列表的HTML是由PHP创建的。

0

1 答案

0 Comments

在Angular中，有几种方法可以实现相关选择。一种方法是使用ng-change指令，通过定义update函数来更新第二个下拉列表：




$scope.update = function(selectedItem1) {
   $scope.items2 = // 根据selectedItem1来过滤items2的逻辑
}

另一种方法是使用$watch函数来监控selectedItem1的变化，并在该函数中更新items2列表。

如果需要使用自定义过滤器，可以参考下面的链接：

https://docs.angularjs.org/tutorial/step_09

angular.module('myModule', []).filter('items2', function() {
  return function(selectedItem1, items2) {
    for (var i = 0; i < items2.length; i++) {
       // 返回你想要的items
    }
  };
});

然后在控制器中，将该过滤器作为依赖注入，并通过调用过滤器来更新$scope.items2：

$scope.items2 = items2Filter($scope.selectedItem1, $scope.items2);

参考Mark Rajcok在stackoverflow上的回答：

http://stackoverflow.com/questions/14386570

除了传递选中的项目作为参数并在update函数中更新第二个下拉列表之外。

或许你可以提供更多关于如何过滤items的信息。你可以使用自定义过滤器来实现，或者使用lodash库也是可能的。

你是否明白这个答案？

是的，谢谢，我会尝试并在这里回复。只是关于这个问题：ng-options="item in items2"，我需要在JS中创建一个包含所有选择列表值的items2对象吗？

是的，你应该创建一个包含所有选择列表值的数组对象。

如果我在页面上有一个选择列表，是否可以在不使用JS中的选项数组的情况下完成？

也许你可以发布你正在使用的生成的HTML代码 - 你可以改变HTML吗？

0