В Angular JS пытаются создать два выпадающих

Question

Я пытаюсь создать два выпадающих в Angular JS Первый выпадающий список будет иметь значения: «А», «В», «С» Когда я выбираю A, он должен показывать A1, A2, A3, A4 во втором выпадающем меню. Аналогично для B он должен показывать B1, B2, B3, B4 и C, он должен показывать C1, C2, C3, C4

. Ниже мои два JSON

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

Любая помощь? Заранее спасибо

Answer 1

используйте приведенный ниже фрагмент кода.

1. положить $scope.$watch на selectedItem
2. использовать $scope.Value.filter

function colFilterCtrl($scope) {

  $scope.selectedItem = '';
  $scope.search = [];

  $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"}
  ];


  $scope.$watch('selectedItem', function() {
    $scope.search = [];
    $scope.Value.filter(function(obj) {
      let values = Object.values(obj)[Object.keys(obj).indexOf($scope.selectedItem.name)];
      $scope.search.push(values);
    });
    
    // remove duplicate values
    $scope.search = $scope.search.filter(function(item, pos) {
    return $scope.search.indexOf(item) == pos;
})

  });

};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
<div ng-controller="colFilterCtrl">
    
    <select name='columns' id="column"  ng-model="selectedItem" ng-options="column as column.name for column in columnList"> <option value="" disabled>Select</option> </select>
            
    <select name='values' id="value" ng-model="selectSubCategory" ng-options="o as o for o in search" required> <option value="" disabled>Select</option> </select>
      
  </div> 
      
</div>

Answer 2

Вот еще один пример. В этом примере создается объект данных, который содержит сопоставление для каждого первого выпадающего элемента, который можно заполнить через базу данных в ближайшем будущем. Вот JSFiddle https://jsfiddle.net/whb1saxg/1/

$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] : [];
            };

Answer 3

Это называется каскадным выпадающим списком. Здесь я создал скрипку, пожалуйста, проверьте ее и дайте мне знать https://jsfiddle.net/vinothsm92/u50hgn5a/1741/

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

Здесь я создал $watch, когда первый выпадающий список изменится, он попадет. вместо $watch вы можете связать данные, используя ng-click событие щелчка.