suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie die versteckte Anzeige in Angular

So implementieren Sie die versteckte Anzeige in Angular

亚连
亚连Original
2018-06-14 15:34:382967Durchsuche

In diesem Artikel wird hauptsächlich Angulars Implementierung der Funktion zum Ausblenden und Anzeigen von Klickschaltflächen vorgestellt und die relevanten Betriebstechniken von AngularJS analysiert, um das Anzeigen und Ausblenden von Seitenelementen einfach in Form von Beispielen zu steuern Artikel

Das Beispiel beschreibt Angulars Implementierung von Klickschaltflächen zur Steuerung der Ausblend- und Anzeigefunktionen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net Angular显示隐藏</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
  <script src="angular.min.js"></script>
    <script>
      var myapp=angular.module("myapp",[]);
      myapp.controller("myCtrl",function ($scope) {
        $scope.show=true;
        $scope.fun=function () {
          $scope.show=!$scope.show;
          console.log($scope.show);
        }
        $scope.hide=true;
        $scope.func=function () {
          $scope.hide=!$scope.hide;
        }
      })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p class="box"ng-show="show"></p>
<button ng-click="fun()">点击切换</button>
<p ng-class="{box:hide}"></p>
<button ng-click="func()">按钮</button>
</body>
</html>

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Welche Arten der Stilbindung gibt es in Angular 2+?

Was sind die Unterschiede zwischen On und Click? in jquery?

Wie implementiert requireJS einen Modullader?

JSsearch imitiert Taobao (ausführliches Tutorial)

Implementierung des MVVM-Frameworks in js (ausführliches Tutorial)

Erklärung des Scope-Bereichs in AngularJS

So erreichen Sie eine leistungsstarke Ladereihenfolge in Javascript

So verwenden Sie vue-cli, um Mobilgeräte zu konfigurieren Anpassung?

So verwenden Sie Echarts in Vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die versteckte Anzeige in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery echarts angular JS 作用域
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So hören Sie sich das Rendering mit AngularJS anNächster Artikel：So hören Sie sich das Rendering mit AngularJS an

In Verbindung stehende Artikel

Mehr sehen