Maison > Article > interface Web > Comment implémenter le changement d'onglet à l'aide d'AngularJS

Comment implémenter le changement d'onglet à l'aide d'AngularJS

php中世界最好的语言original: 2018-05-29 11:33:032292parcourir

Cette fois, je vais vous montrer comment utiliser AngularJS pour implémenter le changement d'onglet. Quelles sont les précautions concernant l'utilisation d'AngularJS pour implémenter le changement d'onglet. Voici des cas pratiques.

Onglet un :

JavaScript+html+css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> js标签页tab切换</title>
    <style>
      #p1 .active{
        background:blue;
      }
      #p1 p{
        width:200px;
        height:200px;
        background:gray;
        border:1px solid black;
        display:none;
      }
    </style>
    <script>
      window.onload=function (){
        var op=document.getElementById('p1');
        var aBtn=op.getElementsByTagName('input');
        var ap=op.getElementsByTagName('p');
        for(var i=0;i<aBtn.length;i++){     //遍历p1中的按钮
          aBtn[i].index=i;      //给aBth[]添加自定义属性
          aBtn[i].onclick=function (){
            for(var i=0;i<aBtn.length;i++){ //遍历按钮，将class清除
              aBtn[i].className=&#39;&#39;;
              ap[i].style.display=&#39;none&#39;;
            }
            this.className=&#39;active&#39;;
            ap[this.index].style.display=&#39;block&#39;;
          }
        }
      }
    </script>
  </head>
  <body>
    <p id="p1">
      <input class="active" type="button" value="选项1" />
      <input type="button" value="选项2" />
      <input type="button" value="选项3" />
      <input type="button" value="选项4" />
      <p style="display:block;">111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    </p>
  </body>
</html>

Onglet deux :

commandes angulaires js :

ng-class, ng-click, ng-if

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS标签页tab切换</title>
  <style>
    .active {
      background-color: orange;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="s1.app">
<p>
  <button ng-class="{ &#39;active&#39; : data.current == 1 }" ng-click="actions.setCurrent(1)">张三</button>
  <button ng-class="{ &#39;active&#39; : data.current == 2 }" ng-click="actions.setCurrent(2)">李四</button>
  <button ng-class="{ &#39;active&#39; : data.current == 3 }" ng-click="actions.setCurrent(3)">王五</button>
</p>
<p>
  <p ng-if="data.current == 1">张三的个人信息</p>
  <p ng-if="data.current == 2">李四的个人信息</p>
  <p ng-if="data.current == 3">王五的个人信息</p>
  <script>
    var app = angular.module('s1.app', []);
    app.run(function ($rootScope) {
      $rootScope.data = {
        current: "1" // 1代表张三，2代表李四，3代表王五
      };
      $rootScope.actions =
      {
        setCurrent: function (param) {
          $rootScope.data.current = param;
        }
      }
    })
  </script>
</p>
</body>
</html>

Onglet trois :

commandes angulaires js :

ng-class, ng-click, ng-show

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title AngularJS标签页tab切换</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-controller="myCtrl as panel">
  <ul>
    <li ng-class="{active:panel.isSelected(1)}">
      <a href ng-click="panel.selectTab(1)">1111111111</a>
    </li>
    <li ng-class="{active:panel.isSelected(2)}">
      <a href ng-click="panel.selectTab(2)">2222222222</a>
    </li>
    <li ng-class="{active:panel.isSelected(3)}">
      <a href ng-click="panel.selectTab(3)">33333333333</a>
    </li>
  </ul>
  <!--是否点击-->
  {{panel.isSelected(1)}}
  {{panel.isSelected(2)}}
  {{panel.isSelected(3)}}
  <p class="panel" ng-show="panel.isSelected(1)">
    <h1>我是1111111111111111111111</h1>
  </p>
  <p class="panel" ng-show="panel.isSelected(2)">
    <h1>我是22222222222222222</h1>
  </p>
  <p class="panel" ng-show="panel.isSelected(3)">
    <h1>我是3333333333333333333333</h1>
  </p>
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
    this.tab = 2;/*设置默认*/
    this.selectTab = function (setTab) {/*设置tab点击事件*/
      this.tab = setTab;
    };
    this.isSelected = function (checkedTab) {/*页面的切换*/
      return this.tab === checkedTab;
    }
  });
</script>
</body>
</html>

Onglet quatre :

directive angulaire js

Les deuxième et troisième voies sont dérivées de l'amélioration du code ci-dessous, les effets sont le même.

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>AngularJS标签页tab切换</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-init="tab=3">
  <ul>
    <li ng-class="{active:tab===1}">
      <a href ng-click="tab=1">1111111111</a>
    </li>
    <li ng-class="{active:tab===2}">
      <a href ng-click="tab=2">2222222222</a>
    </li>
    <li ng-class="{active:tab===3}">
      <a href ng-click="tab=3">33333333333</a>
    </li>
  </ul>
  <!--是否点击-->
  {{tab===1}}
  {{tab===2}}
  {{tab===3}}
  <p class="panel" ng-show="tab===1">
    <h1>我是1111111111111111111111</h1>
  </p>
  <p class="panel" ng-show="tab===2">
    <h1>我是22222222222222222</h1>
  </p>
  <p class="panel" ng-if="tab===3">
    <h1>我是3333333333333333333333</h1>
  </p>
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
  });
</script>
</body>
</html>

Mais il y a une différence entre ng-show et ng-if

La première différence est,

ng-if Ce nœud dom est créé uniquement lorsque l'expression suivante est vraie
ng-show est créée initialement. Utilisez display:block et display:none pour contrôler l'affichage et le non-affichage. montrer.

La deuxième différence est que

ng-if générera (implicitement) une nouvelle portée, et ng-switch, ng-include, etc. créeront dynamiquement un nouvelle portée Il en va de même pour l'interface.

Cela entraînera la liaison de ng-if avec les variables de base dans ng-model et la liaison de ce modèle à une autre zone d'affichage dans la couche externe p. Lorsque la couche interne change, la couche externe ne sera pas synchronisée. Changez, car il y a déjà deux variables à ce moment-là.

<p>{{name}}</p>
<p ng-if="true">
  <input type="text" ng-model="name">
</p>

ng-show n'a pas ce problème car il n'est pas livré avec une portée de premier niveau.

Le moyen d'éviter ce genre de problème est de toujours lier les éléments de la page aux propriétés de l'objet (data.x) plutôt que directement aux variables de base (x). Portée dans AngularJS

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer l'échec de l'installation de l'image nmp Taobao sur Mac

Comment utiliser Koa2 WeChat développement du compte public Mise en place d'un environnement local de développement et de débogage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment gérer l'échec de l'installation de l'image nmp Taobao sur MacArticle suivant：Comment gérer l'échec de l'installation de l'image nmp Taobao sur Mac

Articles Liés

Voir plus