我有一些功能,当我将屏幕缩小到一定尺寸以下并单击表格行时,它会显示该表格行中的其他项目。 (左边的白色屏幕)。
然后,当我展开窗口时,我希望所有表格行都恢复正常,但我有一个错误,如果它已打开,它将不会关闭。
我尝试将$ scope.showIt变量设置为true / false,但如果它与初始$ scope.showIt值相反,它似乎只有效果。当屏幕达到一定大小时,如何更改每个td中的所有ng-class?
这是我的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);
})
答案 0 :(得分:1)
在Angular视图中定义Dot Rule
时使用ng-model
。因此,这将有助于您在引用属性时遵循原型继承。
这里的原因是,您使用了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
集合元素&amp;将showIt
变量设为false。
angular.forEach($scope.services, function(service){
service.showIt = false;
})
你也在DOM上使用自定义事件,我建议你把这个代码放在指令中。所以这也可以重复使用。