动态更改 ng-repeat 元素的宽度

Question

我想通过调用函数更改 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"; ????
}

Answer 1

您想要使用 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 渲染周期更新。

希望对您有所帮助！

Answer 2

使用ngClass：

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

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

见fiddle

Answer 3

我认为你可以在你的控制器中使用一个标志，并使用 $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 元素的宽度

Change width on ng-repeat elements dynamically

javascript

width

angularjs

ng-repeat