Question

我想基于某些条件隐藏多选的某些选项。我尝试复制该方案，请参阅：http://plnkr.co/edit/7cSr5eQYlti4MHGCBa3q?p=preview

<select id="nameType"
            ng-model="selectChoice"
            multiple="multiple"
            name="example-basic"
            size="4"
            style="width:225px">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3" ng-show="visible">Option3</option>
    <option value="Option4" ng-show="visible">Option4</option>
    <option value="Option5" ng-show="visible">Option5</option>
</select>
<button ng-click="toggle()">Toggle </button>

function MainController ($scope) {
    $scope.visible = true;
    $scope.toggle = toggle;

    function toggle () {
        console.log("hiding options");
        if ($scope.visible === false) {
          $scope.visible = true;
        }else {
          $scope.visible = false;
        }
}

}

预计：应隐藏option3,4,5 ...我知道一个选项不是一起使用Jquery和Angular JS，但是这个代码已经在生产中并且不能轻易更改。是否可以使它工作？我有一种感觉$ scope。$ apply（）是解决方案但无法使其工作。

Answer 1

你可以使用这种hacky解决方案：

将ng-show更改为ng-if以确保在切换可见性时将其从DOM中删除：

<select id="nameType"
        ng-model="selectChoice"
        multiple="multiple"
        name="example-basic"
        size="4"
        style="width:225px">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3" ng-if="visible">Option3</option>
    <option value="Option4" ng-if="visible">Option4</option>
    <option value="Option5" ng-if="visible">Option5</option>
</select>

然后在MainController注入$timeout并将其更改为以下内容：

(function (angular){
    angular.module("main-app", [])
           .controller("MainController", ["$scope", "$timeout", MainController]);

    function MainController($scope, $timeout) {
        $scope.visible = true;
        $scope.toggle = toggle;

        function toggle () {
            console.log("hiding options");
            $scope.visible = !$scope.visible;
            refreshMultiSelect();
        }

        function refreshMultiSelect() {
            $timeout(function() {
                $("select").multiselect("refresh");
            }, 0);
        }
    }
})(window.angular);

使用多选的refresh method，我们现在使用更新的选项重绘控件。由于我使用ng-if option为false的visible元素不在DOM中，refresh不会将这些元素放入下拉列表中。

使用Plunker here。

Angular JS使用ng-show来隐藏Jquery Multiselect的某些选项

1 个答案: