我有一个功能,当我将屏幕缩小到一定尺寸以下并单击表格行时,它会显示该表格行中的其他元素。 (左边的白色屏幕)。
然后,当我展开窗口时,我希望所有表格行恢复正常,但我有一个错误,如果它已经打开,它不会关闭。
我尝试将 $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>
在我的 Controller 中:
$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);
})
最佳答案
在 Angular View 中定义 ng-model
时,请务必使用 Dot Rule
。因此,这将帮助您在引用属性时遵循原型(prototype)继承。
这里的原因是,您使用了 ng-repeat
(它确实在每次呈现模板时创建原型(prototype)继承的子作用域)。在这里你需要做同样的事情。像 $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
集合元素并将 showIt
变量设置为 false。
angular.forEach($scope.services, function(service){
service.showIt = false;
})
您还在 DOM 上使用自定义事件,我建议您将这段代码放在指令中。这样也可以重复使用。
关于css - 如何在调整窗口大小时更改 ng-class?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36582048/