Question

我正在尝试使用bootstrap的网格系统组合网格视图。我有一个滑块控制网格应该有多少列和行，网格应该通过数据绑定调整它。我正在使用列部分。我正在尝试根据所选列设置我的类。如果列数是2，那么我想使用col-lg-6，或者3我使用col-lg-4，而我使用col-lg-3。最小计数为2，网格应响应变化值，目前不响应。我不确定这是一个有角度的问题还是我做错了。

这是jsfiddle： http://jsfiddle.net/8JbXZ/

<body ng-app="gridView" ng-controller="gridViewController">
    <div id="sliderContainer">
        Rows : <input value="2" type="range" min="2" max="4" id="rowcount"  step="1" ng-model="rows"/>
        Columns : <input value="2" type="range" min="2" max="4" id="columncount" step="1" ng-model="columns"/>
    </div>
    <div>rows : {{rows}} columns : {{columns}}</div>
    <div class="container">
        <div class="row row0">
            <div class="chart {{columns === 4 &&'col-lg-3' || columns === 3 && 'col-lg-4' || columns === 2 && 'col-lg-6' || ''}}"></div>
            <div class="chart {{columns === 4 &&'col-lg-3' || columns === 3 && 'col-lg-4' || columns === 2 && 'col-lg-6' || ''}}"></div>
            <div class="chart {{columns === 4 &&'col-lg-3' || columns === 3 && 'col-lg-4' || ''}}"></div>
            <div class="chart {{columns === 4 &&'col-lg-3' || ''}}"></div>

新小提琴： http://jsfiddle.net/8JbXZ/7/

抱歉，我不知道更新内容时链接不会自动更新。它现在按我想要的方式工作。

Answer 1

应该是这样的：

<div class="chart {'col-lg-3': columns === 4, 'col-lg-4': columns === 3, 'col-lg-6': columns === 2}"></div>

修改

<div class="chart" ng-class="{'col-lg-3': columns === 4, 'col-lg-4': columns === 3, 'col-lg-6': columns === 2}"></div>

编辑2（带引号）

<div class="chart" ng-class="{'col-lg-3': columns === '4', 'col-lg-4': columns === '3', 'col-lg-6': columns === '2'}"></div>

或者不要使用严格的类型比较：

<div class="chart" ng-class="{'col-lg-3': columns == 4, 'col-lg-4': columns == 3, 'col-lg-6': columns == 2}"></div>

Answer 2

您是否尝试创建这样的响应式网格？

<div class="container">

    <div class="row" ng-repeat="i in range(1, rows)">
        <div class="chart col-xs-{{12/columns}}"
             ng-repeat="i in range(1, columns)">
        </div>
    </div>

</div>

希望我能正确理解你。你也可以在fiddle中看到我从你的分叉。 $ scope.range（）取自this question。

Angularjs数据绑定不适用于类属性

2 个答案: