如何根据事件动态更改引导列?

时间:2016-10-25 18:36:21

标签: html css angularjs twitter-bootstrap

我正在使用angular-ui折叠来隐藏和显示2列,所以当用户点击glyphicon时它将隐藏/显示列,现在当隐藏两列时,我想要10列为12列。是否有可能完成这项任务?

main.html中

<span class="glyphicon glyphicon-th-list" class="btn btn-default" ng-click="isCollapsed = !isCollapsed" id="treelist"></span>
<div class="row">
  <div class="col-md-2" uib-collapse="isCollapsed">
      <p>test</p>
      <p>test</p>
  </div>
  <div class="col-md-10">
    contains some data here ...
  </div>
</div>

2 个答案:

答案 0 :(得分:1)

您应该可以使用ng-class在类之间切换。

<div ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed}">
    contains some data here ...
</div>

答案 1 :(得分:0)

我在Angular中使用这种方式

declare @xml xml set @xml='
    <ncf_report xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://cp.com/rules/client">
    ...
'

;WITH XMLNAMESPACES ('http://cp.com/rules/client' as ns1)
select 
 @xml.value('(ns1:ncf_report/ns1:admin/ns1:product_reference)[1]', 'varchar(10)') as Ref_Number
,@xml.value('(ns1:ncf_report/ns1:report/ns1:summary/ns1:account_status_counters/ns1:account[@type="current" and @status ="1"]/@description)[1]', 'varchar(50)') as CurrentDescription
,@xml.value('(ns1:ncf_report/ns1:report/ns1:summary/ns1:account_status_counters/ns1:account[@type="current" and @status ="1"])[1]', 'int') as CurrentStatus
,@xml.value('(ns1:ncf_report/ns1:report/ns1:summary/ns1:account_status_counters/ns1:account[@type="current" and @status =" "]/@description)[1]', 'varchar(50)') as CurrentDescription_2
,@xml.value('(ns1:ncf_report/ns1:report/ns1:summary/ns1:account_status_counters/ns1:account[@type="current" and @status =" "])[1]', 'int') as CurrentStatus_2