1

I am trying to put together a grid view using bootstrap's grid system. I have a slider that controls how many columns and rows the grid should have, and the grid should adjust to it through databinding. I am having with the column part. I am trying to set my class based on the column selected. If the column count is 2 then I want to use col-lg-6, or 3 I use col-lg-4, and 4 I use col-lg-3. The minimum count is 2, the grid should respond to the changing value and currently it does not. I am not sure if this is an angular problem or I am just doing it wrong.

Here is the 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>

New Fiddle: http://jsfiddle.net/8JbXZ/7/

Sorry I did not know the link doesn't update itself when I update the content. It now works the way I want.

Leo Lin
  • 95
  • 1
  • 10

2 Answers2

1

It should be like:

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

EDIT

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

EDIT 2 (with quoting)

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

or dont use strict type comparison:

<div class="chart" ng-class="{'col-lg-3': columns == 4, 'col-lg-4': columns == 3, 'col-lg-6': columns == 2}"></div>
phylax
  • 2,034
  • 14
  • 13
  • are you sure you don't need {{}} ? I tried this expression in ng-class and no luck. – Leo Lin Apr 24 '14 at 19:34
  • Yes i'm sure. I forgot to use `ng-class`. Edited my answer. See here: https://docs.angularjs.org/api/ng/directive/ngClass – phylax Apr 24 '14 at 19:38
  • I have updated the jsfiddle, still doesn't work. When I go back to 2 columns, it doesn't go back to how it started, which it at least should be able to do. – Leo Lin Apr 24 '14 at 19:42
  • You need quoting: `columns === '4'` `$scope.columns` will be a `string`. – phylax Apr 24 '14 at 20:00
  • And please if you update your fiddle, give the new url. – phylax Apr 24 '14 at 20:03
  • I want to bind columns to be the input from the sliders above. Do inputs with type range have number type or string type for binding? – Leo Lin Apr 24 '14 at 20:05
  • I can't believe it. I knew the difference between === and == but I was always advised to use ===. This time it came back to bite me. 3 good solid hours wasted on ===. Thanks nevertheless! – Leo Lin Apr 24 '14 at 20:08
0

Are you trying to create a responsive grid like this?

<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>

Hope I understood you correctly. You can also see in the fiddle I forked from yours. $scope.range() is taken from this question.

Community
  • 1
  • 1
Kludge
  • 2,653
  • 4
  • 20
  • 42
  • I don't want it to change when i resize the window, I want to control how many columns and rows the grid has and each grid item should adjust to the newly available size. The grid size does not change. – Leo Lin Apr 24 '14 at 20:02
  • I have updated the jsfiddle, it works the way i wanted now. Thanks for you input though, I would use your solution when I need that behavior. – Leo Lin Apr 24 '14 at 20:11