动态更改 ng-repeat 元素的宽度
Change width on ng-repeat elements dynamically
我想通过调用函数更改 ng-repeat 的所有元素的宽度。
这是我的 HTML 代码:
<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" 是从工厂获取的数组。这个数组的长度是可变的
ejec = {
"user0": {
"name": "ejec0"
},
"user1": {
"name": "ejec1"
},
"user2": {
"name": "ejec2"
}
}
所以我需要的是一个功能,可能在点击或定时器时,每次调用时更改我的 ng-repeat 中所有 class="row" 元素的 "width"它:
$scope.changeWidth= function() {
$scope.x = variableNumber;
ng-repeatElements.width = x + "px"; ????
}
您想要使用 ng-style,已找到文档 here。如果你在你的控制器中创建样式对象,你也可以有一个修改它的函数:
$scope.rowWidth = {'width': '200px' };
function setRowWidth(newWidth){
$scope.rowWidth = {'width': newWidth + 'px' }
}
然后您可以将 ng 样式添加到您的 html
<td ng-repeat="z in downLine" ng-style="rowWidth">
每当范围变量 rowWidth 发生变化时,您的视图将通过 angular 渲染周期更新。
希望对您有所帮助!
使用ngClass
:
$scope.changeWidth= function() {
$scope.className = 'large';
}
<td ng-repeat="z in downLine" class="row" ng-class="className">
我认为你可以在你的控制器中使用一个标志,并使用 $timeout/$interval 或控制器函数为此 class 变量设置新值。
见下文
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>
我想通过调用函数更改 ng-repeat 的所有元素的宽度。 这是我的 HTML 代码:
<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" 是从工厂获取的数组。这个数组的长度是可变的
ejec = {
"user0": {
"name": "ejec0"
},
"user1": {
"name": "ejec1"
},
"user2": {
"name": "ejec2"
}
}
所以我需要的是一个功能,可能在点击或定时器时,每次调用时更改我的 ng-repeat 中所有 class="row" 元素的 "width"它:
$scope.changeWidth= function() {
$scope.x = variableNumber;
ng-repeatElements.width = x + "px"; ????
}
您想要使用 ng-style,已找到文档 here。如果你在你的控制器中创建样式对象,你也可以有一个修改它的函数:
$scope.rowWidth = {'width': '200px' };
function setRowWidth(newWidth){
$scope.rowWidth = {'width': newWidth + 'px' }
}
然后您可以将 ng 样式添加到您的 html
<td ng-repeat="z in downLine" ng-style="rowWidth">
每当范围变量 rowWidth 发生变化时,您的视图将通过 angular 渲染周期更新。
希望对您有所帮助!
使用ngClass
:
$scope.changeWidth= function() {
$scope.className = 'large';
}
<td ng-repeat="z in downLine" class="row" ng-class="className">
我认为你可以在你的控制器中使用一个标志,并使用 $timeout/$interval 或控制器函数为此 class 变量设置新值。
见下文
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>