使用ng-show / ng-hide时,我遇到有关HTML5和AngularJS的问题。 在此,我添加了示例代码以便更好地理解。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = true;
$scope.click = function(){
$scope.value = $scope.value ? false : true;
};
});

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<button ng-click="click()" >Click</button>
</div>
</div>
&#13;
在class =&#34; row&#34;中,有3个单独的div等分行。触发按钮单击时,第一行(div)将隐藏。但我不知道为什么其余两行(div)在网格位置发生变化。
我不知道我的代码中缺少什么。我想显示固定网格位置的行,即使其他行是隐藏还是没有。如果我错了,请更正我。
提前致谢。
注意:请在整页中完整地在代码段中运行代码,以便更好地查看。
答案 0 :(得分:2)
这是因为ng-hide
所做的是display: none
,你需要的是visibility:hidden
。因此,解决您的问题的方法是在点击后添加visibility:hidden
类。您可以为此目的定义此类并使用ng-class
或覆盖.ng-hide
类,但我建议您先选择。
最简单的例子:
HTML
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div id="firstCol" class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<button ng-click="click()" >Click</button>
</div>
CSS
#firstCol.ng-hide{
display: block !important;
visibility: hidden;
}
和DEMO
答案 1 :(得分:1)
我无法触发您的错误,但我想我明白了。您是否尝试ng-if
而不是ng-show
? ng-if
只在ng-show
隐藏它时从DOM中删除
编辑如果您想保持网格的位置,请执行
<div class="col-sm-3" style="background-color:lavender;" ng-if="value">.col-sm-3</div>
<div class="col-sm-3 col-sm-offset-3" style="background-color:lavenderblush;" ng-if="!value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;" ng-if="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
答案 2 :(得分:1)
您可以保留像
这样的代码<div class="row">
<div class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" ng-show="!value">...</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>