AngularJS:On Change of Parent下拉选项也会更改与其他家长关联的Dependent下拉选项

请访问此链接以查看问题：

index.html*************************

<div ng-app="myApp">
        <div ng-controller="myController">
            <table>
                <thead>
                <th>Plan</th>
                <th>Options</th>
                </thead>    
                <tbody>
                    <tr ng-repeat="order_detail in order_details">
                        <td>
                            <select id="plan_id" name="plan_id" ng-model="order_detail.plan_id" ng-options="plan.plan_id as plan.name for plan in plans" required ng-change="loadPlanTemplates()">
                                <option value="">-- choose plan --</option>
                            </select>
                        </td>
                        <td>
                            <select id="plan_option_id" name="plan_option_id" ng-model="order_detail.plan_option_id" ng-options="plan_option.plan_option_id as plan_option.name for plan_option in plan_options" required ng-change="loadPlanTemplateValues()" >
                                <option value="">-- choose option --</option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

 var moduleMyAPP = angular.module('myApp', []);
            moduleMyAPP.controller('myController', function ($rootScope, $scope, $http) {

            $scope.order_details = [{plan_id: null, plan_option_id: null}, {plan_id: null, plan_option_id: null}, {plan_id: null, plan_option_id: null}];
            $scope.plans = [{plan_id: 1, name: 'Gold'}, {plan_id: 2, name: 'Platinium'}, {plan_id: 3, name: 'Silver'}];
            $scope.loadPlanTemplates = function () {
                var planId = this.order_detail.plan_id;

                switch (planId) {
                    case 1:
                        $scope.plan_options = [
                            {plan_option_id: 1, name: '10 Years'},
                            {plan_option_id: 2, name: '20 Years'},
                            {plan_option_id: 3, name: '30 Years'},
                        ];
                        break;
                    case 2:
                        $scope.plan_options = [
                            {plan_option_id: 1, name: '5 Years'},
                            {plan_option_id: 2, name: '7 Years'},
                            {plan_option_id: 3, name: '9 Years'},
                        ];
                        break;
                    case 3:
                        $scope.plan_options = [
                            {plan_option_id: 1, name: '2 Years'},
                            {plan_option_id: 2, name: '3 Years'},
                            {plan_option_id: 3, name: '4 Years'},
                        ];
                        break;
                }
            }
        });

---

`您的代码中有几个问题

您为每个select指定了相同的ID，我将其更改为ID=plan\u ID{{{$index}}，以便您可以进行区分

您对“选项”下拉列表中的所有3 ng模型使用了相同的对象。我把它改成了一个二维数组，并且只更新了相关的数组。我还将函数更改为使用ng repeat中的$index，以便函数知道需要更改的内容：

ng change=loadPlanTemplates{{$index}

及

$scope.loadPlantTemplates=函数索引{…}

数组在开始时初始化：

$scope.plan_options=[]、[]、[]、[]

在每种情况下，您都有：

$scope.plan_options[index] = [
              {plan_option_id: 1, name: '10 Years'},
              {plan_option_id: 2, name: '20 Years'},
              {plan_option_id: 3, name: '30 Years'},
               ];
              break;