Sujit Kulkarni Sujit Kulkarni - 5 months ago 93
HTML Question

Angular.js: How to change div width based on user input

I have an input box which accepts the value for div width.
Using angular.js, How can you change div's width based on user input?
I have implemented following code after referring this fiddle.http://jsfiddle.net/311chaos/vUUf4/4/

Markup:

<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols" ng-change="flush()"/>

<div getWidth rowHeight=cols ng-repeat="div in divs">{{$index+1}} aaaaaa</div>


controller.js

var grid = angular.module('gridApp', []);

grid.controller('control', ['$scope', function ($scope) {

/* code for repeating divs based on input*/
$scope.divs = new Array();
$scope.create=function(){ //function invoked on button's ng-click
var a = $scope.cols;
for(i=0;i<a;i++)
{
$scope.divs.push(a);
}
alert($scope.divs);
};


}]);

grid.directive('getWidth', function () {
return {
restrict: "A",
scope: {
"rowHeight": '='
},
link: function (scope, element) {

scope.$watch("rowHeight", function (value) {
console.log(scope.rowHeight);
$(element).css('width', scope.rowHeight + "px");
}, false);
}
}
});

function appCtrl($scope) {
$scope.cols = 150; //just using same input value to check if working


}


UPDATE
My ultimate goal is to set width of that div. When I call inline CSS like following I achieve what I want.

<div get-width row-height="{{cols}}" ng-repeat="div in divs" style="width:{{cols}}px">{{$index+1}} aaaaaa</div>


But this wouldn't be always efficient if number of divs goes high. So, again question remains, how to do this via angular script?

Answer

Use ng-style="{width: cols + 'px'}", instead of style.

link to the docs: http://docs.angularjs.org/api/ng.directive:ngStyle