我想根据特定条件隐藏多选的某些选项。我尝试复制该场景,请参阅: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() 是解决方案,但无法使其工作。
最佳答案
您可以使用这种 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 .
关于javascript - Angular JS 使用 ng-show 隐藏 Jquery Multiselect 的某些选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35663235/