如果显示整行内容,则使用角度ng
Angular ng-if show content entire row
我想显示整行的内容。现在,我的内容仅显示在"名称"列中。点击"更多"可以显示内容。我创建了一个Plunker:
窗口必须绘制得更大,以便在Plunker中正确显示内容。Plunker
这是我的数据
$scope.data = [{
"example": "5235235",
"name": "22222",
"__v": 0,
"test": {
"a": "731",
"b": "671",
"c": "671",
"d": "671",
"e": "671",
"f": "671",
"g": "671",
"h": "1342",
"i": "1342",
"j": "1342",
"k": "1342",
"l": "1342",
"m": "1322",
"n": "1342"
}
}]
表:
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Example</th>
<th>Test</th>
<th>Button</th>
</tr>
<tr>
</tr>
</thead>
<tbody ng-repeat="dat in data ">
<tr>
<td>{{dat.name}}</td>
<td>{{dat.example}}</td>
<td>{{dat.test.a}}</td>
<td>
<button ng-click="show=!show" class="btn btn-info">
<span class="glyphicon glyphicon-pencil">More</span>
</button>
</td>
<tr class="dat-details" ng-if="show">
<td>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-3">
<input ng-model="dat.name" class="form-control" placeholder="Name" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Example</label>
<div class="col-md-3">
<input ng-model="dat.example" class="form-control" placeholder="Example" type="text" />
</div>
</div>
<div class="form-group">
<div class="form-group">
<span class="col-md-2 control-label">Test</span>
</div>
<div class="col-md-12">
<div class="form-group ">
<label class="col-md-2 control-label">A</label>
<div class="col-md-4">
<input ng-model="dat.test.a" class="form-control" type="text" />
</div>
<label class="col-md-2 control-label">B</label>
<div class="col-md-4">
<input ng-model="dat.test.b" class="form-control" type="text" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-2 control-label">C</label>
<div class="col-md-4">
<input ng-model="dat.test.c" class="form-control" type="text" />
</div>
<label class="col-md-2 control-label">D</label>
<div class="col-md-4">
<input ng-model="dat.test.d" class="form-control" type="text" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-2 control-label">E</label>
<div class="col-md-4">
<input ng-model="dat.test.e" class="form-control" type="text" />
</div>
<label class="col-md-2 control-label">F</label>
<div class="col-md-4">
<input ng-model="dat.test.f" class="form-control" type="text" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-2 control-label">G</label>
<div class="col-md-4">
<input ng-model="dat.test.g" class="form-control" type="text" />
</div>
<label class="col-md-2 control-label">H</label>
<div class="col-md-4">
<input ng-model="dat.test.h" class="form-control" type="text" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-2 control-label">I</label>
<div class="col-md-4">
<input ng-model="dat.test.i" class="form-control" type="text" />
</div>
<label class="col-md-2 control-label">J</label>
<div class="col-md-4">
<input ng-model="dat.test.j" class="form-control" type="text" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-2 control-label">K</label>
<div class="col-md-4">
<input ng-model="dat.test.k" class="form-control" type="text" />
</div>
<label class="col-md-2 control-label">L</label>
<div class="col-md-4">
<input ng-model="dat.test.l" class="form-control" type="text" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-2 control-label">M</label>
<div class="col-md-4">
<input ng-model="dat.test.m" class="form-control" type="text" />
</div>
<label class="col-md-2 control-label">N</label>
<div class="col-md-4">
<input ng-model="dat.test.n" class="form-control" type="text" />
</div>
</div>
</div>
</div>
<button ng-click="show=!show" class="btn btn-success">
<span class="glyphicon glyphicon-ok"></span> Updaten
</button>
</form>
</td>
</tr>
</tbody>
</table>
Plunker:Plunker
@p。。。P…写在评论上:
您需要添加colspan。
<tr class="dat-details" ng-if="show"> <td colspan="4">
相关文章:
- ng隐藏和ng显示无法正常工作
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- ng显示与变量的比较
- ng显示“;调用方法“;不起作用
- 角度方向ng显示不工作
- 有棱角的ng显示与动画.css
- ng显示ng隐藏在ng中,重复如何为每个包裹的块单击/触发
- AngularJS自定义指令ng显示/ng隐藏
- 模型更新时触发ng显示
- ng显示基于其他一些html元素的模型值
- AngularJS ng显示表达式在加载时不起作用
- 如何在使用$http缓存时重新触发ng-if/ng显示动画
- Angular 1.2.x ng隐藏和ng显示css转换
- Safari中Angular ng显示的按钮闪烁
- 我想使用ng重复数组值设置ng显示
- AngularJS-ng显示范围变量不起作用
- 为什么这个简单的ng绑定和ng显示不起作用
- 延迟后触发ng显示
- Ionic:ng显示和页面转换
- 角度ng显示不会在示波器更新时更新