Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能示例

更新時(shí)間：2017年12月29日 11:31:20 作者：當(dāng)愛0201

這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能,結(jié)合實(shí)例形式分析了AngularJS簡單控制頁面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能。分享給大家供大家參考，具體如下：

先來看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dhdzp.com 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">
<div class="box"ng-show="show"></div>
<button ng-click="fun()">點(diǎn)擊切換</button>
<div ng-class="{box:hide}"></div>
<button ng-click="func()">按鈕</button>
</body>
</html>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會(huì)看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問題，其實(shí)它們在官方的文檔里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來講
2015-10-10
Angular如何引入第三方庫的方法詳解
本篇文章主要介紹了Angular如何引入第三方庫的方法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
AngularJS API之copy深拷貝詳解及實(shí)例
這篇文章主要介紹了AngularJS API之copy深拷貝詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下
2016-09-09
angularjs獲取到My97DatePicker選中的值方法
今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
詳解AngularJS中自定義指令的使用
這篇文章主要介紹了詳解AngularJS中自定義指令的使用,包括結(jié)合自定義HTML標(biāo)簽的使用,需要的朋友可以參考下
2015-06-06
Angular刷新當(dāng)前頁面的實(shí)現(xiàn)方法
這篇文章主要介紹了Angular刷新當(dāng)前頁面的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
在Angular中使用JWT認(rèn)證方法示例
這篇文章主要介紹了在Angular中使用JWT認(rèn)證方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
AngularJs點(diǎn)擊狀態(tài)值改變背景色的實(shí)例
下面小編就為大家分享一篇AngularJs點(diǎn)擊狀態(tài)值改變背景色的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
angular雙向綁定模擬探索
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子
這篇文章主要介紹了ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子,本文簡單介紹AngularJS框架后,用一個(gè)實(shí)例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以參考下
2014-12-12