这是我简单的引导程序代码。
<div class="container">
<div class="col-lg-12">
<div class="col-lg-3">
<p>
aaaaaa
</p>
</div>
<div class="col-lg-3">
<p>
bbbbb
</p>
</div>
<div class="col-lg-3" ng-show="myVar">
<p>
cccccc
</p>
</div>
<div class="col-lg-3">
<p>
bbbbb
</p>
</div>
</div>
</div>
在这里,我连续放置了4个盒子。
我已经初始化了一个名为myvar
的变量。基于myVar
变量,某些框可能会隐藏。
因此,当隐藏一个框框时,应管理其他框的宽度,即应增加宽度。应该没有多余的空间。
如果宽度为col-lg-3
,则表示在隐藏框时应将其更改为col-lg-4
。
小提琴:https://jsfiddle.net/euxcj3qb/14/
如何执行此操作?谁能给我一些建议?
答案 0 :(得分:3)
像这样使用它
<div class="container" ng-app="myApp">
<div class="col-lg-12" ng-controller="myController">
<div class="col-xs-12 col-sm-6 col-md-4" ng-class="{' col-lg-3': myVar, ' col-lg-4': !myVar}">
<p>
aaaaaa
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4" ng-class="{' col-lg-3': myVar, 'col-lg-4': !myVar}">
<p>
bbbbb
</p>
</div>
<div class="" ng-show="myVar" ng-class="{' col-lg-3': myVar}">
<p>
cccccc
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 " ng-class="{'col-lg-3': myVar, ' col-lg-4': !myVar}">
<p>
bbbbb
</p>
</div>
</div>
</div>
更新了fiddle
答案 1 :(得分:1)
您可以为此使用ng-class
,并在那里定义规则。变量更改后,它将反映所有更改。这是一个演示:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myVar = false;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.col-xs-3,
.col-sm-3,
.col-lg-3 {
border: 2px solid red;
}
.col-xs-4,
.col-sm-4,
.col-lg-4 {
border: 2px solid red;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div class="row">
<div ng-class="{'col-xs-3 col-sm-3 col-lg-3':myVar, 'col-xs-4 col-sm-4 col-lg-4':!myVar}">
<p>
aaaaaa
</p>
</div>
<div ng-class="{'col-xs-3 col-sm-3 col-lg-3':myVar, 'col-xs-4 col-sm-4 col-lg-4':!myVar}">
<p>
bbbbb
</p>
</div>
<div ng-class="{'col-xs-3 col-sm-3 col-lg-3':myVar, 'col-xs-4 col-sm-4 col-lg-4':!myVar}" ng-show="myVar">
<p>
cccccc
</p>
</div>
<div ng-class="{'col-lg-3':myVar, 'col-xs-4 col-sm-4 col-lg-4':!myVar}">
<p>
bbbbb
</p>
</div>
</div>
</div>
<button class="btn btn-default" ng-click="myVar = !myVar">Click
</button>
</div>
</body>
</html>
您只需要:ng-class="{'col-lg-3':myVar, 'col-lg-4':!myVar}"
答案 2 :(得分:1)
您可以使用JavaScript进行操作,只要隐藏一个即可更改类。这是删除班级的方法。类似的是添加新的。示例:
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.remove("mystyle");
}
答案 3 :(得分:0)
非常感谢您的回答。这给了我短暂而预期的结果
<div class="container">
<div class="col-lg-12">
<div class="col-lg-3" ng-class={'expandGrid':myVar }>
<p>
aaaaaa
</p>
</div>
<div class="col-lg-3" ng-class={'expandGrid':myVar }>
<p>
bbbbb
</p>
</div>
<div class="col-lg-3" ng-show="myVar" >
<p>
cccccc
</p>
</div>
<div class="col-lg-3" ng-class={'expandGrid':myVar }>
<p>
bbbbb
</p>
</div>
</div>
</div>
Css:
.expandGrid{
width:33.33334%;
}
脚本:
$scope.myVar = true;
我可以将ng-class
与class
一起使用吗?如果我错了,请纠正我。