Change width on ng-repeat elements dynamically
Question
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"; ????
}
3 answers
solution1
1 ACCPTED 2015-03-20 01:18:04
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!
solution2
0 2015-03-20 01:18:38
Use ngClass :
$scope.changeWidth= function() {
$scope.className = 'large';
}
<td ng-repeat="z in downLine" class="row" ng-class="className">
See fiddle
solution3
0 2015-03-20 01:32:04
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.