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

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

}

预期:选项3、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 中注入(inject) $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);

使用刷新 method对于多选，我们现在使用更新的选项重新绘制控件。因为我使用了 ng-if，所以 visible 为 false 的 option 元素不在 DOM 中，并且 refresh 获胜不要将它们放入下拉列表中。

工作中的笨蛋here .