javascript - Angular.js: How to change div width based on user input - Stack Overflow

admin管理员组

文章数量:1186089

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

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?

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?

• javascript
• html
• css
• angularjs

Share Improve this question Follow edited Jan 4, 2014 at 9:17 Sujit Y. Kulkarni asked Jan 3, 2014 at 11:40 Sujit Y. KulkarniSujit Y. Kulkarni 1,38644 gold badges2424 silver badges4040 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 31

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

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

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/

本文标签： javascriptAngularjs How to change div width based on user inputStack Overflow