Question

如何基于元素id隐藏元素，我尝试隐藏元素而不使用：

document.getElementById('lis'+divId).style.visibility = "hidden";

但这在使用单个元素时有效，但如果我使用ng-repeat则不会隐藏元素。

 <li ng-repeat="dashBoardAddWidgetList in dashBoardAddWidgetLists"  
            ng-click="addTemplate(dashBoardAddWidgetList.widget.widgetType,$index)"
                     id="lis{{$index}}" >{{dashBoardAddWidgetList.widget.widgetName}}</li>

controller.js

$scope.addTemplate = function(name,divId) {
                  //$scope.templates.push( { name: 'achPayBankProcess.html', url: '/Templates/dashboard/widgets/achPayBankProcess.html' });
                  $scope.templates.push( { name: name, url: '/Templates/dashboard/widgets/'+name,isSelected:1});
                  document.getElementById(divId).style.visibility = "hidden";
                  $scope.listCount--;
              };

Answer 1

尝试这种简单的方式就像@priyanka所说的那样。（把我的答案当作一把钥匙）

$scope.items = [{isshow:false,name:"Me"},{isshow:false,name:"We"},   
               {isshow:false,name:"I"},{isshow:false,name:"Us"}]

// HTML

<div ng-repeat="item in items">
<div ng-hide="item.isshow">
{item.name}<button ng-click="ShowOrHide(this.item, $index)">show/hide</button>
</div> 
</div>


//click event
$scope.ShowOrHide(context,index)
{
context.ishsow=true;
$scope.items[index]=context;
}

Answer 2

改为使用ng-hide：

<li ng-repeat="dashBoardAddWidgetList in dashBoardAddWidgetLists"  
    ng-click="addTemplate(dashBoardAddWidgetList)"
    id="lis{{$index}}"
    ng-hide="dashBoardAddWidgetList.hide">
    {{dashBoardAddWidgetList.widget.widgetName}}
</li>

在你的控制器中：

$scope.addTemplate = function(widgetList, divId) {
    var name = widgetList.widget.widgetType;

    $scope.templates.push({
        name: name, 
        url: '/Templates/dashboard/widgets/'+name,
        isSelected: 1
    });

    // Set flag for hide on true
    widgetList.hide = true;
    $scope.listCount--;
};

Answer 3

使用ng-if而不是ng-hide..it会提高ng-repeat的性能，因为ng-hide会将隐藏的元素保留在DOM中，但ng-if会从DOM中移除该元素。所以我们无法修改它浏览器检查

Answer 4

controller.js

$scope.addTemplate = function(name,divId) {

              //$scope.templates.push( { name: 'achPayBankProcess.html', url: '/Templates/dashboard/widgets/achPayBankProcess.html' });
              $scope.templates.push( { name: name, url: '/Templates/dashboard/widgets/'+name,isSelected:1});
              alert('lis'+divId);
              document.getElementById('lis'+divId).style.visibility"hidden";
              $scope.listCount--;
              $scope.isselect=divId;
              };

如何在ng-repeate中隐藏基于id的元素

4 个答案: