Angularjs databinding not working on class attribute

Question

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.

I have tried that too, same problem.

Leo Lin
– Leo Lin

2014-04-24 19:20:28 +00:00
Commented Apr 24, 2014 at 19:20 — Leo Lin
– Leo Lin, Commented Apr 24, 2014 at 19:20

phylax · Accepted Answer · 2014-04-24 20:00:34Z

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>

edited Apr 24, 2014 at 20:00

answered Apr 24, 2014 at 19:30

phylax

2,09615 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Leo Lin Over a year ago

are you sure you don't need {{}} ? I tried this expression in ng-class and no luck.

phylax Over a year ago

Yes i'm sure. I forgot to use ng-class. Edited my answer. See here: docs.angularjs.org/api/ng/directive/ngClass

Leo Lin Over a year ago

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.

phylax Over a year ago

You need quoting: columns === '4' $scope.columns will be a string.

phylax Over a year ago

And please if you update your fiddle, give the new url.

|

Community · Accepted Answer · 2017-05-23 10:28:14Z

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.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Apr 24, 2014 at 20:01

Kludge

2,8554 gold badges26 silver badges47 bronze badges

2 Comments

Leo Lin Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

Angularjs databinding not working on class attribute

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related