Home > Article > Web Front-end > How to implement hidden display in Angular

How to implement hidden display in Angular

亚连Original: 2018-06-14 15:34:382895browse

This article mainly introduces Angular's implementation of click button control hiding and display functions, and analyzes related operating techniques of AngularJS to simply control the display and hiding of page elements in the form of examples. Friends in need can refer to this article

The example describes Angular's implementation of clicking buttons to control the hiding and display functions. Share it with everyone for your reference, the details are as follows:

Let’s take a look at the running effect first:

The specific code is as follows:

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

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Angular 2 What are the ways of style binding

What are the differences between on and click in jquery?

requireJS How to implement a module loader?

Taobao-like JSsearch search (detailed tutorial)

Implementing the MVVM framework in js (detailed tutorial)

Explanation of scope scope in angularjs

How to achieve high-performance loading sequence in javascript

How to use vue-cli Configure mobile adaptation?

How to use echarts in vue

The above is the detailed content of How to implement hidden display in Angular. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery echarts angular JS 作用域

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to listen to rendering using AngularJSNext article：How to listen to rendering using AngularJS

See more

How to implement hidden display in Angular

Related articles