ng-show 设置为 false 不会在页面加载时隐藏元素

Question

我有这段代码，使用 Angular 1.3，我希望 div 和 ng-show 指令在我首先加载页面时不显示：

       <div class="stuff">
            <uib-accordion close-others="false">
                <div ng-show="element.visible" ng-repeat="element in elements" ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
                    <uib-accordion-heading>
                        {{element.title}} ({{element.number}}) 
                    </uib-accordion-heading>
                    <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
                    </div>
                </div>
            </uib-accordion>                
        </div>

element.visible 布尔值在控制器中设置为 false:

$scope.elements = [{
            status: 0,       
            title: blabla,
            number: 0,
            open: false,
            active: false,         
            visible: false
        }, {
            status: 1,     
            title: blob,        
            number: 0,
            open: false,
            active: false,         
            visible: false
        }]

出于某种原因，ng-show 似乎已正确设置为 false，但该元素仍会显示。如果我将一个按钮绑定到 visible 布尔值并在浏览器中更改它，则该元素会正确显示和消失。

Answer 1

元素在页面加载时可见，因为范围尚未链接到指令。 ng-cloak 可以解决您的问题

Answer 2

尝试使用ng-cloak

ngCloak 指令用于防止 AngularJS html 模板在您的应用程序加载时以其原始（未编译）形式被浏览器短暂显示。

<div id="template1" ng-cloak>{{ 'hello' }}</div>

Answer 3

您正在使用两者 ng-if and ng-show。尝试删除其中的任何一个。两者的目的相同。

并且还使用 ng-cloak 来防止 AngularJS html 模板在您的应用程序加载时以其原始（未编译）形式被浏览器短暂显示。

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.elements = [{
    status: 0,
    title: 'blabla',
    number: 0,
    open: false,
    active: false,
    visible: false
  }, {
    status: 1,
    title: 'blob',
    number: 0,
    open: false,
    active: false,
    visible: false
  }];
  
  $scope.ShowHide = function(){
    angular.forEach($scope.elements, function(element){
      element.visible=!element.visible;
      element.active=!element.active;
      alert(element.visible);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="stuff">
    <uib-accordion close-others="false">
      <div ng-cloak ng-show="element.visible" ng-repeat="element in elements" ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
        <uib-accordion-heading>
          {{element.title}} ({{element.number}})
        </uib-accordion-heading>
        <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
        </div>
      </div>
    </uib-accordion>
    <button ng-click="ShowHide()">Make visible</button>
  </div>
</div>

Answer 4

对于在 angular 中使用 uib-accordions 遇到相同问题的任何人。

事实证明，如果最初设置为 false 并在 uib-accordion 标记内使用，ng-show 将无法正常工作。我为解决这个问题所做的是将手风琴包裹在 div 中，然后在 div 上使用 ng-show。像这样：

         <div class="stuff">
            <div ng-show="element.visible" ng-repeat="element in elements" >
            <uib-accordion close-others="false">
                <div ng-if="element.active" uib-accordion-group ng-class="element.open? 'colorBackgroundBlue':'black'" class="panel-default yellow" is-open="element.open">
                    <uib-accordion-heading>
                        {{element.title}} ({{element.number}}) 
                    </uib-accordion-heading>
                    <div class="scrollable-accordion" ng-if="element.numberOfElements!=0">
                    </div>
                </div>
            </uib-accordion>
            </div>
        </div>

注意：问题仅发生在页面加载时，并且仅出现在 ng-show 和 ng-hide 中，而 ng-if 似乎在 <uib-accordion> 中运行良好。感谢所有试图提供帮助的人。

Answer 5

添加 class="ng-hide" 以及 ng-cloak。 <span class="bag-badge bag-melon ng-hide" ng-show="itemsincart>0" ng-cloak>{{itemsincart}}</span>

它对我有用，它避免了页面加载时元素的闪烁。

ng-show 设置为 false 不会在页面加载时隐藏元素

ng-show set as false doesn't hide element at page load

html

javascript

angularjs

ng-show