Angularjs 在Angular jS中，尝试创建两个下拉列表

我试图在Angular JS中创建两个下拉列表 第一个下拉列表将具有以下值： “A”、“B”、“C” 当我选择A时，它应该在第二个下拉列表中显示A1、A2、A3、A4。同样，对于B，它应该显示B1、B2、B3、B4和C，它应该显示C1、C2、C3、C4

.以下是我的两张照片

$scope.column = [{
        colid: 1,
        name:"A"
        }, {
        colid: 2,
        name: "B"
       }, {
        colid: 3,
        name: "C"
       }];

$scope.Value=[{"A":"A1","B":"B1","C":"C1"},
{"A":"A2","B":"B2","C":"C2"},
{"A":"A3","B":"B1","C":"C3"},
{"A":"A1","B":"B3","C":"C1"},
{"A":"A4","B":"B4","C":"C4"},
];

下面是我尝试的代码

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('colFilter', ['ui', 'ui.filters']);
app.controller("colFilterCtrl", function ($scope, $timeout) {
$scope.columnList = [{
        colid: 1,
        name:"A"
        }, {
        colid: 2,
        name: "B"
       }, {
        colid: 3,
        name: "C"
       }];

$scope.Value=[{"A":"A1","B":"B1","C":"C1"},
              {"A":"A2","B":"B2","C":"C2"},
              {"A":"A3","B":"B1","C":"C3"},
              {"A":"A1","B":"B3","C":"C1"},
              {"A":"A4","B":"B4","C":"C4"},
];
};
</script>
<div id="colFilterApp" data-ng-app="colFilter">
    <div id="colFilterAppCtrl" data-ng-controller="colFilterCtrl" >
<select  id="column" name="columns" ng-options="column.name for column in columnList" ng-model="selectedItem">
     <option value="All">--Select--</option>
</select>
<select  id="value" name="values">
     <option value="All">--Select--</option>
     <option ng-repeat="val in Value"  value="{{val.selectedItem}}">{{val.selectedItem}}</option>
</select> 
</div>
</div>

var app=angular.module（'colFilter'，['ui'，'ui.filters']）；
app.controller（“colFilterCtrl”，函数（$scope，$timeout）{
$scope.columnList=[{
科里德：1，
姓名：“A”
}, {
科里德：2，
姓名：“B”
}, {
科里德：3，
名称：“C”
}];
$scope.Value=[{“A”：“A1”、“B”：“B1”、“C”：“C1”}，
{“A”：“A2”，“B”：“B2”，“C”：“C2”}，
{“A”：“A3”，“B”：“B1”，“C”：“C3”}，
{“A”：“A1”，“B”：“B3”，“C”：“C1”}，
{“A”：“A4”，“B”：“B4”，“C”：“C4”}，
];
};
--挑选--
--挑选--
{{val.selectedItem}

---

有什么帮助吗？提前谢谢你，这叫做层叠下拉菜单。这里我创建了一个小提琴，请检查一下，让我知道

---

在这里，我创建了一个

$watch

，当第一个下拉列表更改时，它将命中。您可以使用

ng click

click事件绑定数据。

使用下面的代码片段

将

$scope.$watch

置于

selectedItem

使用

$scope.Value.filter

函数colFilterCtrl（$scope）{ $scope.selectedItem=''； $scope.search=[]； $scope.columnList=[{ 科里德：1， 姓名：“A” }, { 科里德：2， 姓名：“B” }, { 科里德：3， 名称：“C” }]; $scope.Value=[ {“A”：“A1”、“B”：“B1”、“C”：“C1”}， {“A”：“A2”，“B”：“B2”，“C”：“C2”}， {“A”：“A3”，“B”：“B1”，“C”：“C3”}， {“A”：“A1”，“B”：“B3”，“C”：“C1”}， {“A”：“A4”，“B”：“B4”，“C”：“C4”} ]; $scope.$watch（'selectedItem'，function（）{ $scope.search=[]； $scope.Value.filter（函数（obj）{ 让values=Object.values（obj）[Object.keys（obj.indexOf（$scope.selectedItem.name）]； $scope.search.push（值）； }); //删除重复值 $scope.search=$scope.search.filter（函数（项目，位置）{ 返回$scope.search.indexOf（item）==pos； }) }); }；

挑选
挑选

这里还有一个示例。在这个示例中，创建了一个数据对象，其中包含每个第一个下拉项的映射，这些下拉项可以在不久的将来通过数据库填充。下面是JSFIDLE

---

谢谢，但我需要我的json以这种方式工作。非常感谢。这就是我一直在寻找的。是的，这可能有一天会有用

$scope.$watch('first', function () {
        $scope.Seconds = allSeconds.filter(function (s) {
            return s.firstId == $scope.first.Id;
        });
        $scope.city = {};
        $scope.Second = {};
        $scope.cities = [];
    });

$scope.columnList = [
                    {
                        colid: 1,
                        name: "A"
                    }, {
                        colid: 2,
                        name: "B"
                    }, {
                        colid: 3,
                        name: "C"
                    }
                ];

                $scope.selectedItem = $scope.selectedItemValues  = [];

                $scope.childValues = {
                    "A": [{
                        colid: 1,
                        name: "A1"
                    }, {
                        colid: 2,
                        name: "A2"
                    }, {
                        colid: 3,
                        name: "A3"
                    }],

                    "B": [{
                        colid: 4,
                        name: "B1"
                    }, {
                        colid: 5,
                        name: "B2"
                    }, {
                        colid: 6,
                        name: "B3"
                    }],
                    "C": [{
                        colid: 7,
                        name: "C1"
                    }, {
                        colid: 8,
                        name: "C2"
                    }, {
                        colid: 9,
                        name: "C3"
                    }]
                };
$scope.ddlChange = function () {
                $scope.Value = ($scope.selectedItem !== undefined) ? $scope.childValues[$scope.selectedItem.name] : [];
            };