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

我想根据特定条件隐藏multiselect的某些选项。我试图复制该场景，请参见：

选择1
选择2
选择3
选择4
选择5
切换
功能主控制器（$scope）{
$scope.visible=true；
$scope.toggle=切换；
函数切换（）{
log（“隐藏选项”）；
如果（$scope.visible==false）{
$scope.visible=true；
}否则{
$scope.visible=false；
}
}

}

---

预期：选项3、4、5应隐藏。。。我知道一个选择是不同时使用Jquery和Angular JS，但这段代码已经在生产中，不能轻易更改。有可能使它工作吗？我有一种感觉，$scope。$apply（）是解决方案，但无法使其工作。

您可以使用这种黑客解决方案：

将

ng show

s更改为

ng if

s，以确保在切换可见性时将其从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>

使用multiselect的

刷新

，我们现在用更新的选项重新绘制控件。因为我使用了

ng if

，

选项

中

可见

为false的元素不在DOM中，并且

刷新

不会将它们放入下拉列表中

---

正在工作的Plunker。

您可以使用这种黑客解决方案：

将

ng show

s更改为

ng if

s，以确保在切换可见性时将其从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>

使用multiselect的

刷新

，我们现在用更新的选项重新绘制控件。因为我使用了

ng if

，

选项

中

可见

为false的元素不在DOM中，并且

刷新

不会将它们放入下拉列表中

正在工作的普朗克

(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);