Question

访问此链接以查看问题： http://plnkr.co/edit/CPxvE4SC6ScTH57s6CmQ?p=preview

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

的script.js *********

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

`

Answer 1

您的代码中存在多个问题。

您为每个选择提供了相同的ID，我将其更改为id="plan_id{{$index}}"，以便您可以区分。
您对所有3个ng-model选项下拉列表使用了相同的对象。我将其更改为二维数组，只需更新相关数组即可。我还更改了函数以使用$index中的ng-repeat，因此该函数将知道需要更改的内容：

ng-change="loadPlanTemplates({{$index}})

和

$scope.loadPlanTemplates = function (index) { ... }

数组在开头初始化：

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

Plunker

AngularJS：关于父母DropDown选项的变化也改变了与其他父母相关的依赖下拉选项

1 个答案: