总部设在吴选项/ EX pression条件选择伍选项选择/重新编译伍选项 [英] Conditional Selector in Ng-Options / Expression Based Ng-Options Selector / Recompiling Ng-Options

问题描述

我仍然在与角让我明白我可能接近这件事错了，很想知道正确的方式，如果是这样的话学习过程非常多。

I am still very much in the learning process with Angular so I understand I may be approaching this whole thing wrong and would love to know the proper way if that is the case.

我有一组级联的下拉列表中的 - 这是显示的第2个下拉菜单选项取决于用户在第一个下拉选择什么了。

I have a set of cascading dropdowns - that is the 2nd dropdowns options displayed depends on what the user selected in the first drop down.

一个简单的例子：

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选项后=2ndList.chocolateName ......这看起来很棒但NG选项指令没有重新评估下拉这一新的变化。

After running the $scope.on1stDropDownChange function and inspecting the element I can see, for example ng-options="2ndList.chocolateName ...." which looks great but the ng-options directive did not reevaluate the drop down with this new change.

我想有角重新评估/重新编译/重新处理（注意确保适当的期限）选择元素的NG选项后，我改变的选项列表。我曾尝试

I want to have Angular reevaluate/recompile/reprocess (note sure the proper term) the ng-options of the select element after I change the list of options. I have tried

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

和也把名单在$更改应用功能。两人都没有工作。

and also putting the change of the list in an $apply function. Both did not work.

解决方案将不会在这种情况下工作 - 我不能添加新列或重命名描述栏目，以简化允许他们是相同的。我也知道，东西这首曲子可以通过创建不同的NG-隐藏/显示方案来实现 - 我已经沿着这条路，并且变得难以维持。任何帮助/指导AP preciated，谢谢！

Solutions that depend on database changes would not work in this case - I can not add new columns or rename "descriptive" columns to simplify allowing them to be the same. I also know that something to this tune can be done by creating different ng-hide/show scenarios - I have gone down this route and it becomes difficult to maintain. Any help/guidance is appreciated, thanks!

推荐答案

所以，我最终想办法从控制器做到100％。我放弃了使用在视图中NG选项里面的前pression的和而不是改变NG-选项属性的元素，然后重新编译（同时指定我没有做的范围内），像这样的元素做到了：

So I ended up figuring out a way to do it 100% from the controller. I dropped the use of the expression inside the ng-options in the view and did it instead by changing the elements ng-option attribute and THEN recompiling (while specifying the scope which I was not doing) the element like so:

角：

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

            }
    }

注：我在技术上可以只选择chocolateList / COMPUTERLIST的.attr变化，但里面我离开它像，使前，后更快比较。

Note: I technically could have just selected chocolateList/computerList inside of the .attr change but I left it like that make comparing the before and after quicker.

这篇关于总部设在吴选项/ EX pression条件选择伍选项选择/重新编译伍选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！