文章/答案/技术大牛

发布

社区首页 >问答首页 >在Select2中使用MetroUI CSS的依赖下拉列表不起作用。

问在Select2中使用MetroUI CSS的依赖下拉列表不起作用。
EN

Stack Overflow用户

提问于 2016-01-02 21:02:57

回答 2查看 1.5K关注 0票数 1

Select2与MetroUI CSS很好地配合AngularJS。但是，当我尝试在从属下拉列表中使用相同的列表时，我面临的问题是，子下拉列表的视图没有得到相应的更新以更改父下拉列表。

这里是一个Stack片段，展示了我所看到的问题。

(function () {
    "use strict";
    var app = angular.module("app", []);

    app.controller("AppCtrl", AppCtrl);

    function AppCtrl() {
        var vm = this;

        vm.ContextData = {
            selectParents: [{ "id": 1, "name": "item 1" },
                { "id": 2, "name": "item 2" },
                { "id": 3, "name": "item 3" },
                { "id": 4, "name": "item 4" }],
            selectChildren: [{ "id": 1, "parentId": 1, "name": "1 based on item1" },
                { "id": 2, "parentId": 1, "name": "2 based on item1" },
                { "id": 3, "parentId": 1, "name": "3 based on item1" },
                { "id": 4, "parentId": 1, "name": "4 based on item1" },
                { "id": 5, "parentId": 1, "name": "5 based on item1" },
                { "id": 6, "parentId": 1, "name": "6 based on item1" },
                { "id": 7, "parentId": 1, "name": "7 based on item1" },
                { "id": 8, "parentId": 2, "name": "8 based on item2" },
                { "id": 9, "parentId": 2, "name": "9 based on item2" },
                { "id": 10, "parentId": 2, "name": "10 based on item2" },
                { "id": 11, "parentId": 2, "name": "11 based on item2" },
                { "id": 12, "parentId": 2, "name": "12 based on item2" },
                { "id": 13, "parentId": 3, "name": "13 based on item3" },
                { "id": 14, "parentId": 3, "name": "14 based on item3" },
                { "id": 15, "parentId": 3, "name": "15 based on item3" },
                { "id": 16, "parentId": 3, "name": "16 based on item3" },
                { "id": 17, "parentId": 4, "name": "17 based on item4" },
                { "id": 18, "parentId": 4, "name": "18 based on item4" }]
        };            
    }

})();

<body ng-app="app" ng-controller="AppCtrl as vm">
    <div class="flex-grid">
        <div class="row">
            <div class="cell colspan2 margin10">
                <div class="input-control full-size" data-role="select" data-placeholder="Select a parent" data-allow-clear="true">
                    <select class="full-size" style="display:none" ng-model="vm.selectedParent" ng-options="item.name for item in vm.ContextData.selectParents">
                        <option value=""></option>                        
                    </select>
                </div>
            </div>
            <div class="cell colspan2 margin10">
                <div class="input-control full-size" data-role="select" data-placeholder="Select a child" data-allow-clear="true">
                    <select class="full-size" style="display:none" ng-model="vm.selectedChild" ng-options="item.name for item in vm.ContextData.selectChildren | filter:{parentId:vm.selectedParent.id}">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-grid margin10">
        <div class="row">
            <div class="cell colspan2">
                Selected Parent : 
            </div>
            <div class="cell colspan3">
                {{vm.selectedParent}}
            </div>
        </div>
        <div class="row">
            <div class="cell colspan2">
                selected Child : 
            </div>
            <div class="cell colspan3">
                {{vm.selectedChild}}
            </div>
        </div>
    </div>    
</body>

<link href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro-responsive.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro.min.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script src="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/js/metro.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

复制步骤：

在“父选择”中选择“项目1”(家长选择的位置持有者是“选择父母”)
在“选择父”部分中，显示所选父级的正确值。
子选择与正确的子选项绑定。
从子选择中选择任意选项。
在“所选子”部分中，显示所选子项的正确值。
在父选择中，选择“项4”。
在“选择父”部分中，显示所选父级的正确值。
子选择是绑定的，但是选项没有更新，它仍然显示父Item1的选项。
在子选择中选择任何项目，在“选择子”部分显示正确的子项值，但是子下拉列表显示错误的项！

因此，我的问题是，即使子select获得了绑定到它的正确选项，但它的options视图不会刷新。

我尝试了select2.val(")，但是子下拉列表的选项视图仍然没有刷新。

另一个问题是:如果清除“父选择”中的“选择”，则不会清除“子选择”中的“选择”。

jquery-select2

metro-ui-css

angularjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-04 17:49:41

请参阅此codepen.io以使从属下拉列表正常工作。

解决办法的要点是：

给孩子一张身份证
然后向父下拉列表提供ng更改事件。
在父下拉列表的ng更改事件中，通过它的ID搜索子下拉列表
然后调用子下拉菜单上的select2函数来清空选定的值和html。
不要忘记在孩子下拉时触发更改事件.

因此，在ng更改事件(childSelect2是子下拉列表的ID )中会出现这样的情况：

var ele = angular.element('#childSelect2');            
ele.html("").val("").trigger("change");

还请注意，在单击父下拉列表中的十字标记时，我们将清除子拖放，因为我们调用的是ele.html("").val("").trigger("change");。

这是预期的，因为如果在父母中没有选择，那么在孩子中选择就没有意义了。但是这样，我们还需要清除子下拉的ng模型，因此在ng更改函数中，将子下拉模型设置为null (vm.selectedChild是用于子下拉的ng模型)。

vm.selectedChild = null;

尽管为了产生任何效果，我发现在调用ele.html("").val("").trigger("change");之前应该将子模型设置为null，因此我将它作为ng更改事件中的第一个语句。我不知道为什么这个排列顺序是重要的，但只有在这个更改之后，它才起作用:)

希望这个答案能帮助别人，节省他们的时间。

快速参考: HTML代码：

<body ng-app="app" ng-controller="AppCtrl as vm">
    <div class="flex-grid">
        <div class="row">
            <div class="cell colspan2 margin10">
                <div class="input-control full-size" data-role="select" data-placeholder="Select a parent" data-allow-clear="true">
                    <select class="full-size" style="display:none" ng-model="vm.selectedParent" ng-options="item.name for item in vm.ContextData.selectParents" ng-change="vm.SetSelect2()">
                        <option value=""></option>                        
                    </select>
                </div>
            </div>
            <div class="cell colspan2 margin10">
                <div class="input-control full-size" data-role="select" data-placeholder="Select a child" data-allow-clear="true">
                    <select class="full-size" style="display:none" ng-model="vm.selectedChild" ng-options="item.name for item in vm.ContextData.selectChildren | filter:{parentId:vm.selectedParent.id}" id="childSelect2">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-grid margin10">
        <div class="row">
            <div class="cell colspan2">
                Selected Parent : 
            </div>
            <div class="cell colspan3">
                {{vm.selectedParent}}
            </div>
        </div>
        <div class="row">
            <div class="cell colspan2">
                selected Child : 
            </div>
            <div class="cell colspan3">
                {{vm.selectedChild}}
            </div>
        </div>
    </div>    
</body>

JS代码(角模块和控制器)：

(function () {
    "use strict";
    var app = angular.module("app", []);

    app.controller("AppCtrl", AppCtrl);

    function AppCtrl() {
        var vm = this;

        vm.ContextData = {
            selectParents: [{ "id": 1, "name": "item 1" },
                { "id": 2, "name": "item 2" },
                { "id": 3, "name": "item 3" },
                { "id": 4, "name": "item 4" }],
            selectChildren: [{ "id": 1, "parentId": 1, "name": "1 based on item1" },
                { "id": 2, "parentId": 1, "name": "2 based on item1" },
                { "id": 3, "parentId": 1, "name": "3 based on item1" },
                { "id": 4, "parentId": 1, "name": "4 based on item1" },
                { "id": 5, "parentId": 1, "name": "5 based on item1" },
                { "id": 6, "parentId": 1, "name": "6 based on item1" },
                { "id": 7, "parentId": 1, "name": "7 based on item1" },
                { "id": 8, "parentId": 2, "name": "8 based on item2" },
                { "id": 9, "parentId": 2, "name": "9 based on item2" },
                { "id": 10, "parentId": 2, "name": "10 based on item2" },
                { "id": 11, "parentId": 2, "name": "11 based on item2" },
                { "id": 12, "parentId": 2, "name": "12 based on item2" },
                { "id": 13, "parentId": 3, "name": "13 based on item3" },
                { "id": 14, "parentId": 3, "name": "14 based on item3" },
                { "id": 15, "parentId": 3, "name": "15 based on item3" },
                { "id": 16, "parentId": 3, "name": "16 based on item3" },
                { "id": 17, "parentId": 4, "name": "17 based on item4" },
                { "id": 18, "parentId": 4, "name": "18 based on item4" }]
        };

        vm.SetSelect2 = function () {
            ////debugger;
            vm.selectedChild = null;
            var ele = angular.element('#childSelect2');
            //ele.html("");
            //ele.val("").trigger("change");  

            ele.html("").val("").trigger("change");
        }
    }

})();

票数 0

Stack Overflow用户

发布于 2016-01-03 23:11:43

这里的问题是，一旦下拉列表打开，Select2如何缓存选项，因为它正在将它认为是正确的数据对象保存到<option>中，即使AngularJS稍后实际上正在更改该选项。因此，Select2仍将显示缓存的数据，而AngularJS将识别该选项已经更改，您最终会看到这样奇怪的边缘情况。

除了强迫AngularJS在依赖的下拉列表中不重用选项之外，目前还没有解决这个问题的已知解决方案。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34570702

复制

相似问题

问在Select2中使用MetroUI CSS的依赖下拉列表不起作用。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Select2中使用MetroUI CSS的依赖下拉列表不起作用。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Select2中使用MetroUI CSS的依赖下拉列表不起作用。
EN