欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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簡(jiǎn)單控制頁(yè)面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下

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

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

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn 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é)》

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

相關(guān)文章

  • AngularJs每天學(xué)習(xí)之總體介紹

    AngularJs每天學(xué)習(xí)之總體介紹

    這篇文章主要為大家詳細(xì)介紹了Angularjs總體介紹及數(shù)據(jù)綁定部分內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-08-08
  • Angular使用Md5加密的解決方法

    Angular使用Md5加密的解決方法

    這篇文章主要介紹了Angular使用Md5加密的解決方法,需要的朋友可以參考下
    2017-09-09
  • AngularJS封裝$http.post()實(shí)例詳解

    AngularJS封裝$http.post()實(shí)例詳解

    這篇文章主要介紹了 AngularJS封裝$http.post()實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-05-05
  • angularjs實(shí)現(xiàn)與服務(wù)器交互分享

    angularjs實(shí)現(xiàn)與服務(wù)器交互分享

    AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。
    2014-06-06
  • Angularjs注入攔截器實(shí)現(xiàn)Loading效果

    Angularjs注入攔截器實(shí)現(xiàn)Loading效果

    angularjs作為一個(gè)全ajax的框架，對(duì)于請(qǐng)求，如果頁(yè)面上不做任何操作的話，在結(jié)果反回來之前，頁(yè)面是沒有任何響應(yīng)的，不像普通的HTTP請(qǐng)求，會(huì)有進(jìn)度條之類
    2015-12-12
  • Angular ng-repeat指令實(shí)例以及擴(kuò)展部分

    Angular ng-repeat指令實(shí)例以及擴(kuò)展部分

    這篇文章主要為大家詳細(xì)介紹了Angular ng-repeat指令實(shí)例以及擴(kuò)展部分，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-12-12

    • 最新評(píng)論