Css 如何在调整窗口大小时更改ng类？

我有一个功能，当我将屏幕缩小到某个大小以下并单击某个表格行时，它会显示该表格行中的其他项目。（左侧为白色屏幕）

然后，当我展开窗口时，我希望所有表行恢复正常，但我有一个错误，如果它已经打开，它将不会关闭。

我尝试将$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>

{{service.name}
{{service.description}}
{{service.prices}}

在我的控制器中：

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

$scope.dropDetails=函数（showIt）{//此函数运行良好。
console.log（窗口）
console.log（window.innerWidth）
如果（窗内宽度<760）{
返回！展示它；
}否则{
返回showIt；
}
}
var w=角度元素（$window）；
var resizeId=0；
$scope.showIt=true；
w、 绑定（'调整大小'，函数（a）{
clearTimeout（resizeId）；
resizeId=setTimeout（函数（）{
if（w[0]。内部宽度<760）{
}否则{
$scope.showIt=true；//不执行任何操作。
$scope.$apply（）；
}                   
}, 500);
})

在角度视图中定义

ng模型时，一定要使用
点规则
。因此，这将帮助您在引用这些属性时遵循原型继承

这里的原因是，您使用了
ng repeat
（每次在视图中呈现模板时都会创建原型继承的子范围）。在这里，你需要做同样的事情。定义模型，如
$scope.model
和定义
showIt
属性的内部。相反，您应该将
showIt
放在
服务
的每个元素上，通过这些元素您可以单独处理每个事件

标记

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

另外，如果您在DOM上使用自定义事件，我建议您将此代码放入指令中。这样也可以重复使用。
您从未将
$scope.showIt
设置为
false
。是打字错误吗？@AdnanUmer函数在ng单击时将其设置为false
if（window.innerWidth<760）{return！showIt；}
当窗口再次变大时，变量“w”如何重新设置？
w[0]。innerWidth
会准确地更改窗口大小。谢谢，它可以调整大小，但现在，当我点击任何一个，他们都显示。我需要在单击时分别设置它们，然后在调整大小时将它们全部隐藏。@Squirrl很高兴能帮助您。谢谢：-）
angular.forEach($scope.services, function(service){
   service.showIt = false;
})