javascript - 动态更改 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"元素的“宽度”:

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

Answer 1

你想使用ng-style，文档发现here 。如果您在 Controller 中创建样式对象，您还可以有一个修改它的函数:

 $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 发生变化，您的 View 就会通过 Angular 渲染周期进行更新。

希望这有帮助!