CODEWITHSUNDEEP
javascriptangularjswidthangularjs-ng-repeat
chino_10
chino_10

Reputation: 27

Change width on ng-repeat elements dynamically

I want to change the width for all the elements of a ng-repeat by calling a function. This is my HTML code:

<div ng-controller="fillTab">
<table>
     <tr>
        <td ng-repeat="z in downLine" class="row">
           <table class="contUser" >
              <tr>
                <td>
                   <img src="{{z.picture}}" class='mask-pic'></img>
                   <p>Sometext</p>
                </td>
                <td>
                   <p>{{z.name}}</p>
               </td>
             </tr>
           </table>
         </td>  
     </tr>
</table>
</div>

"downline" is an array took from a factory. The length of this array is variable 

ejec = {
        "user0": {
            "name": "ejec0"
        },
        "user1": {
            "name": "ejec1"
        },
        "user2": {
            "name": "ejec2"
        }
}

So what I need is a function that maybe on click or timer, change the "width" of all my class="row" elements in my ng-repeat every time I call it:

 $scope.changeWidth= function() {
   $scope.x = variableNumber;
    ng-repeatElements.width = x + "px"; ????
}

Upvotes: 1

Views: 1685

Answers (3)

Leonardo Neninger
Leonardo Neninger

Reputation: 586

I think you can use a flag into you controller and with $timeout/$interval or a controller function set the new value for this class variable.

See below 

var module = angular.module('myapp', []);
module.controller('controller', ['$scope', '$interval', function($scope, $interval){
      $scope.items = [
        {
            "name": "ejec0"
        },
        {
            "name": "ejec1"
        },
        {
            "name": "ejec2"
        }];
    $scope.class = 'base';
  
  $interval(function(){
    if($scope.class==='base') $scope.class='change';
    else $scope.class='base';
  }, 1000);
}]);
.base{with:50px; background-color:red;}
.change{with:150px; background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myapp">
  <head>
  </head>
  <body ng-controller="controller">
    <table>
      <tr ng-repeat="item in items" ng-class="class">
        <td ng-bind="item.name"></td>
        </tr>
      </table>
    </body>
</html>

Upvotes: 0

Michel
Michel

Reputation: 28359

Use ngClass :

$scope.changeWidth= function() {
   $scope.className = 'large';
}

<td ng-repeat="z in downLine" class="row" ng-class="className">

See fiddle

Upvotes: 0

Aaron
Aaron

Reputation: 2450

You want to use ng-style, docs found here. If you create the style object in your controller, you can also have a function that modifies it:

 $scope.rowWidth = {'width': '200px' };
 function setRowWidth(newWidth){
    $scope.rowWidth = {'width': newWidth + 'px' }
 }

then you can add the ng-style to your html

<td ng-repeat="z in downLine" ng-style="rowWidth">

Anytime the scope variable rowWidth changes, your view will be updated by the angular render cycle.

Hope this helps!

Upvotes: 2

Related Questions