web-dev-qa-db-ja.com

AngularJS：ng-show対display：none

次のように、CSSを使用してデフォルトでHTML要素を非表示にしておく必要があるユースケースがありました。

HTML：

<div class="item">
</div>

CSS：

.item {
    display: none;
}

ただし、次のようにページが読み込まれた後、ng-showを使用して要素の可視性を切り替える必要があります。

<div class="item" ng-show="show_element">
</div>

ただし、$scope.show_elementがtrueに設定されている場合、要素は表示されません。つまり、cssプロパティがAngularJSのng-showをオーバーライドしています。 ng-showをより優先する方法はありますか？

また、あなたが私が守れると思うかもしれません$scope.show_element最初はfalseとして非表示にします。しかしその場合、ページが読み込まれているときにUXの観点からは良くない要素がほんの少ししか見えません。

javascriptcssangularjsng-show
10
Tarun Dugar

あなたのケースでそれを機能させる1つの方法は、ng-class要素を表示する必要がある場合は、正しい表示プロパティでクラスを適用できます。つまり、display: blockそして遅い場合bootstrapあなたはng-cloakここでドキュメントを確認してください https://docs.angularjs.org/api/ng/directive/ngCloak

5
maurycy

別の簡単な代替手段

style="{{show_element?'display:block !important':'display:none !important'}}"
5
shreedhar bhat

ロード時にフラッシュが発生しないようにアイテムを非表示にしようとしているだけの場合は、.itemクラスをdisplay:noneに設定する代わりに、.ng-hideをng-showがオンの要素に追加します。

AngularJSディレクティブng-showは、DOM要素に.ng-hideのクラスを追加または削除することで機能します。 .ng-hideクラスはルールdisplay: none !important;を適用します

<div class="ng-hide" ng-show="showElement">...</div>
0
lemmingworks