4

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?

2 Answers 2

31

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

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

3
  • 1
    I've read many times that, often writing inline style is not a good practice. So if your element is gonna be repeated 100 times, it wouldn't be a good practice. That's why I'm avoiding writing inline style here. Would it be ok, if you're using ng-style? Jan 4, 2014 at 13:11
  • 4
    Writing inline styles isn't usually a good practise but in this case this is the only thing that can be done to resize the element. As fro ng-style AFAIK it still add style="" but you can map scope variable to it so you could do something like ng-style="styles" and add the styles in the scope like: $scope.styles = {width: something + 'px'}
    – Jon Snow
    Jan 4, 2014 at 13:17
  • {{cols}} doesn't seem to work in newer Angular versions. If you're having this problem, try (cols) instead.
    – kcstricks
    May 26, 2016 at 18:35
0

You have an error in yor angular syntax. You Should use

ng-repeat="div in divs track by $index"

Also you should use attrs.$observe instead of $watch.

Working demo (updated): http://jsfiddle.net/nidzix/UKHyL/40/

5
  • strange. That is working in fiddle. But not when brought into my code. When i don't write 'track by' it works fine, else does not. Jan 3, 2014 at 13:01
  • Did you properly include angular library, controller and app name? Jan 3, 2014 at 13:14
  • Yes definitely. Script is called properly, otherwise rest of code wouldn't have worked. Controller and app name is also fine. But I've placed directive after controller, is that fine? Jan 3, 2014 at 13:26
  • Yes, it doesn't matter. Fiddle is completely transparent, so there is no hidden code, and simple copy paste should be working. If you have other changes in your code they can have also impact to the result. Jan 3, 2014 at 13:31
  • Hey sorry for late reply. Thing is, I c/ped your fiddle as it is. So on my local, when I remove 'track by $index' part, it works fine. But when I remove the same part while on fiddle, it doesn't react. And vice-a-verse. Jan 4, 2014 at 9:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.