javascript - Angularjs databinding not working on class attribute -
i trying put grid view using bootstrap's grid system. have slider controls how many columns , rows grid should have, , grid should adjust through databinding. having column part. trying set class based on column selected. if column count 2 want use col-lg-6, or 3 use col-lg-4, , 4 use col-lg-3. minimum count 2, grid should respond changing value , not. not sure if angular problem or doing wrong.
here 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 did not know link doesn't update when update content. works way want.
it should 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> 
Comments
Post a Comment