Angularで非表示表示を実装する方法-jsチュートリアル-php.cn

Angularで非表示表示を実装する方法

亚连

リリース： 2018-06-14 15:34:38

オリジナル

2950 人が閲覧しました

この記事では、Angular のクリックボタンコントロールの非表示と表示機能の実装を主に紹介し、ページ要素の表示と非表示を簡単に制御するための AngularJS の関連操作テクニックをサンプルの形で紹介します。この記事では、ボタンコントロールの非表示および表示機能の Angular の実装例について説明しています。参考のために皆さんと共有してください。詳細は次のとおりです:

まずランニング効果を見てみましょう:

具体的なコードは次のとおりです:

<!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>

ログイン後にコピー

上記は、私が皆さんのためにコンパイルしたものです。今後皆さんのお役に立てば幸いです。

Angular 2+ でのスタイルバインディングの方法は何ですか?

jQuery の on と click の違いは何ですか?

requireJS はモジュールローダーをどのように実装しますか?

淘宝網のJSsearch検索を模倣する（詳細なチュートリアル）

jsでMVVMフレームワークを実装する（詳細なチュートリアル）

angularjsのスコープスコープの説明

JavaScript Seで高パフォーマンスの読み込みを実現する方法クエンス

vue-cli を使用してモバイルアダプテーションを構成するにはどうすればよいですか?

vueでechartsを使用する方法

以上がAngularで非表示表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。