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>

＆＃34;下线＆＃34;是一个从工厂拿来的阵列。该数组的长度是可变的

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

所以我需要的是一个可能在点击或计时器上的功能，改变＆＃34;宽度＆＃34;我的所有班级=＆＃34;行＆＃34;每次我称之为ng-repeat中的元素：

 $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-style添加到你的html

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

只要范围变量rowWidth发生变化，您的视图就会被角度渲染周期更新。

希望这有帮助！

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或控制器函数为此类变量设置新值。

见下文

＆＃13;

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);
}]);

＆＃13;

.base{with:50px; background-color:red;}
.change{with:150px; background-color:yellow;}

＆＃13;

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

＆＃13;

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

3 个答案: