Question

我仍然非常关注Angular的学习过程，所以我理解我可能正在接近这一切，并且如果是这样的话，我很想知道正确的方法。

我有一组级联下拉菜单 - 显示的第二个下拉菜单选项取决于用户在第一个下拉列表中选择的内容。

简化示例：

HTML

            <select 
                    ng-model="1stDropDown"
                    ng-change="on1stDropDownChange()"
                    ng-options="1stListItem.name for 1stListItem in 1stList"></select>

                <select 
                        id="2ndDropDown"
                        ng-model="2ndDropDown"
                        ng-options="2ndListItem{{2ndListItemDescriptiveProperty}} for 2ndListItem in 2ndList"></select>

角

$scope.on1stDropDownChange = function() {
        var 1stListID = $scope.1stDropDown.id;
         switch (1stListID) {
                case 1:
                    $scope.2ndList= $scope.chocolateList;
                     $scope.2ndListItemDescriptiveProperty= ".chocolateName";
                     //NEED TO RECOMPILE ELEMENT HERE
                     break;
                case 2:
                    $scope.2ndList= $scope.computerList;
                    $scope.2ndListItemDescriptiveProperty= ".computerType";
                    //NEED TO RECOMPILE ELEMENT HERE
                    break;

            }
    }

在运行$ scope.on1stDropDownChange函数并检查我可以看到的元素之后，例如ng-options="2ndList.chocolateName ...."看起来很棒，但ng-options指令没有重新评估这个新变化的下拉列表。

我希望在更改选项列表后，让Angular重新评估/重新编译/重新处理（请注意确定正确的术语）select元素的ng-options。我试过了

$compile($('#2ndDropDown'));

并将列表的更改放在$ apply函数中。两者都不起作用。

依赖于数据库更改的解决方案在这种情况下不起作用 - 我无法添加新列或重命名＆＃34;描述性＆＃34;列简化允许它们相同。我也知道可以通过创建不同的ng-hide / show场景来完成这个调整的某些事情 - 我已经走了这条路线并且变得难以维护。感谢任何帮助/指导，谢谢！

Answer 1

所以我最终想出了一种方法，100％来自控制器。我在视图中的ng-options中放弃了表达式的使用，而是通过更改元素ng-option属性然后重新编译（同时指定我没有做的范围）这样的元素来完成它：

角：

$scope.on1stDropDownChange = function() {
        var 1stListID = $scope.1stDropDown.id;
        var element = angular.element($('#2ndDropDown'));
         switch (1stListID) {
                case 1:
                    $scope.2ndList= $scope.chocolateList;
                    element.attr('ng-options', '2ndListItem.chocolateName for 2ndListItem in 2ndList');
                    $compile(element)($scope);
                     break;
                case 2:
                    $scope.2ndList= $scope.computerList;
                    element.attr('ng-options', '2ndListItem.computerType for 2ndListItem in 2ndList');
                    $compile(element)($scope);
                    break;

            }
    }

注意：我在技术上可能只是在.attr更改中选择了chocolateList / computerList，但我把它留下来比较快速前后比较。

Ng-Options /基于表达式的Ng选项选择器/重新编译Ng选项中的条件选择器

1 个答案: