如何在 window 调整大小时更改 ng-class？

Question

我有一个功能，当我将屏幕缩小到一定尺寸以下并单击 table 行时，它会显示该 table 行中的其他项目。（左边的白色屏幕）。

然后，当我展开 window 时，我希望所有 table 行都正常 return，但是我有一个错误，如果它已经打开，它就不会关闭。

我尝试将 $scope.showIt 变量设置为 true/false，但它似乎只有在与初始 $scope.showIt 值相反时才有效。当屏幕达到一定尺寸时，如何更改每个 td 中的所有 ng-类？

这是我的html：

<tr class="table-body  "ng-repeat="service in services | orderBy:myOrderBy | filter:search">
    <td align="center" valign="middle" ng-click="showIt = dropDetails(showIt)" ng-class="{'name-show':showIt, 'name-show-disabled':!showIt}">{{ service.name }}</td>
    <td  ng-class="{'show':showIt, 'show-disabled':!showIt}">{{ service.description }}</td>
    <td  ng-class="{'show':showIt, 'show-disabled':!showIt}">{{ service.prices }}</td>
</tr>

在我的控制器中：

$scope.dropDetails = function(showIt){ //This function works well. 
    console.log(window)     
    console.log(window.innerWidth)      
    if(window.innerWidth < 760){
        return !showIt;
    }else{
        return showIt;
    }

}

var w = angular.element($window);
var resizeId=0; 
$scope.showIt = true;

w.bind('resize ', function (a) {
        clearTimeout(resizeId);
        resizeId = setTimeout(function(){

        if(w[0].innerWidth < 760){

        }else{

            $scope.showIt = true;  //Does nothing. 
            $scope.$apply();

        }                   
        }, 500);
})

Answer 1

在 Angular 视图中定义 ng-model 时请使用 Dot Rule。因此，这将帮助您在引用属性.

时遵循原型继承

这里的原因是，您使用了 ng-repeat（它确实在每次呈现模板时创建原型继承的子作用域）。在这里你需要做同样的事情。像 $scope.model 这样定义模型，并在其中定义 showIt 属性。相反，您应该将 showIt 放在 services 的每个元素上，通过它们单独处理每个事件。

标记

<tr class="table-body" ng-repeat="service in services | orderBy:myOrderBy | filter:search">
    <td align="center" valign="middle" 
      ng-click="service.showIt= dropDetails(service.showIt)" 
      ng-class="{'name-show':service.showIt, 'name-show-disabled':!service.showIt}">
        {{ service.name }}
    </td>
    <td  ng-class="{'show':service.showIt, 'show-disabled':!service.showIt}">
       {{ service.description }}
    </td>
    <td  ng-class="{'show':service.showIt, 'show-disabled':!service.showIt}">
        {{ service.prices }}
    </td>
</tr>

现在的问题是如何隐藏所有 services，这样会很容易。遍历每个 services 集合元素并使 showIt 变量为 false。

angular.forEach($scope.services, function(service){
   service.showIt = false;
})

您还在 DOM 上使用自定义事件，我建议您将此代码放在指令中。这样也可以重复使用。

如何在 window 调整大小时更改 ng-class？

How do I change ng-class on window resize?

css

angularjs

ng-class