如何在窗口大小调整时更改ng-class?

时间:2016-04-12 19:11:55

标签: css angularjs ng-class

我有一些功能,当我将屏幕缩小到一定尺寸以下并单击表格行时,它会显示该表格行中的其他项目。 (左边的白色屏幕)。

enter image description here

然后,当我展开窗口时,我希望所有表格行都恢复正常,但我有一个错误,如果它已打开,它将不会关闭。
enter image description here

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

1 个答案:

答案 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上使用自定义事件,我建议你把这个代码放在指令中。所以这也可以重复使用。