cari

Rumah >hujung hadapan web >tutorial js >AngularJS tab栏实现和mvc小案例（图文教程）

AngularJS tab栏实现和mvc小案例（图文教程）

亚连
亚连asal
2018-05-22 14:07:501406semak imbas

这篇文章主要介绍了angularJS tab栏实现和mvc小案例,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下

tab栏:

代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Tab 标签</title> 
  <style> 
    body { 
      margin: 0; 
      padding: 0; 
      background-color: #F7F7F7; 
    } 
    .tabs { 
      width: 400px; 
      margin: 30px auto; 
      background-color: #FFF; 
      border: 1px solid #C0DCC0; 
      box-sizing: border-box; 
    } 
    img { 
      width: 400px; 
    } 
    .tabs nav { 
      height: 40px; 
      text-align: center; 
      line-height: 40px; 
      overflow: hidden; 
      background-color: #C0DCC0; 
      display: flex; 
    } 
    nav a { 
      display: block; 
      width: 100px; 
      border-right: 1px solid #FFF; 
      color: #000; 
      text-decoration: none; 
    } 
    nav a:last-child { 
      border-right: 0 none; 
    } 
    nav a.active { 
      background-color: #9BAF9B; 
    } 
    .cont { 
      overflow: hidden; 
      /*display: none;*/ 
    } 
    .cont ol { 
      line-height: 30px; 
    } 
    p { 
      text-align: center; 
      height: 30px; 
      line-height: 30px; 
    } 
    li { 
      list-style: none; 
      height: 30px; 
      line-height: 30px; 
    } 
  </style> 
  <!--[if lte IE 6]> 
  <![endif]--> 
</head> 
<body ng-app="Tabs"> 
  <p class="tabs" ng-controller="TabsController"> 
    <nav> 
    <!-- 指令之间没有分号 --> 
      <a href="javascript:;" ng-class="{active: type == &#39;local&#39;}" ng-mouseover="switch(&#39;local&#39;)">白山茶</a> 
      <a href="javascript:;" ng-class="{active: type == &#39;global&#39;}" ng-mouseover="switch(&#39;global&#39;)">作曲</a> 
      <a href="javascript:;" ng-class="{active: type == &#39;sports&#39;}" ng-mouseover="switch(&#39;sports&#39;)">背景</a> 
      <a href="javascript:;" ng-class="{active: type == &#39;funny&#39;}" ng-mouseover="switch(&#39;funny&#39;)">歌词</a> 
    </nav> 
    <p ng-switch on="type"> 
      <section class="cont" ng-switch-when="local"> 
        <p>2017.5.24</p> 
      </section> 
      <section class="cont" ng-switch-when="global"> 
        <p>作曲：陈雪凝</p> 
        <p>作词:陈雪凝</p> 
        <p>编曲:海艺音乐</p> 
      </section> 
      <section class="cont" ng-switch-when="sports"> 
          <img src="bsc.png"> 
      </section> 
      <section class="cont" ng-switch-when="funny"> 
        <ul> 
          <li>你认真的说你喜欢白山茶</li> 
          <li>怡然自得的收起别的红玫瑰</li> 
          <li>你温柔的说你眷恋我</li> 
          <li>然后迫不及待的爱别人</li> 
          <li>然后迫不及待的爱别人</li> 
          <li>然后迫不及待的爱别人</li> 
          <li>然后迫不及待的爱别人</li> 
        </ol> 
      </section> 
    </p> 
  </p> 
  <script src="../../js/angular.min.js"></script> 
  <script> 
    angular.module(&#39;Tabs&#39;,[]).controller(&#39;TabsController&#39;,[&#39;$scope&#39;,function($scope){ 
       $scope.type = &#39;local&#39;; 
       $scope.switch = function(type){ 
        $scope.type = type; 
       } 
    }]); 
  </script> 
</body> 
</html>

mvc小案例:

代码：

<!doctype html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Template • TodoMVC</title> 
    <!-- <link rel="stylesheet" href="css/base.css"> --> 
    <link rel="stylesheet" href="css/index.css"> 
    <!-- CSS overrides - remove if you don&#39;t need it --> 
    <link rel="stylesheet" href="css/app.css"> 
  </head> 
  <body ng-app="Todos"> 
    <section class="todoapp" ng-controller="TodoController"> 
      <header class="header"> 
        <h1>todos</h1> 
        <form ng-submit="add()"> 
        <!-- 用户输入点 --> 
          <input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus> 
        </form> 
      </header> 
      <section class="main"> 
        <input class="toggle-all" type="checkbox"> 
        <label for="toggle-all">Mark all as complete</label> 
        <ul class="todo-list"> 
          <li ng-repeat="(key,todo) in todos"> 
            <p class="view"> 
              <input type="checkbox" class="toggle" ng-click="done(key)" > 
              <label>{{todo.text}}</label> 
              <button class="destroy" ng-click="delete(todos,key)" ></button> 
            </p> 
            <input class="edit" value="Create a TodoMVC template"> 
          </li> 
          <li><h5>已完成</h5></li> 
          <li class="completed" ng-repeat="todo in doneTodos"> 
            <p class="view"> 
              <input class="toggle" type="checkbox" ng-checked="todo.flag" > 
              <label>{{todo.text}}</label> 
              <button class="destroy" ng-click="delete(doneTodos,key)"></button> 
            </p> 
            <input class="edit" value="Rule the web"> 
          </li> 
        </ul> 
      </section> 
      <footer class="footer"> 
        <span class="todo-count"><strong></strong> {{todos.length}} item left</span> 
        <button class="clear-completed">Clear completed</button> 
      </footer> 
    </section> 
    <footer class="info"> 
      <p>Double-click to edit a todo</p> 
      <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p> 
      <p>Created by <a href="http://todomvc.com">you</a></p> 
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> 
    </footer> 
  </body> 
  <script src="../../js/angular.min.js"></script> 
  <script> 
    angular.module(&#39;Todos&#39;,[]).controller(&#39;TodoController&#39;,[&#39;$scope&#39;,function($scope){ 
      // 定义一个数组存储用户输入的数据 
      $scope.todos = []; 
      $scope.doneTodos = []; 
      $scope.add = function(){ 
        $scope.todos.push({text:$scope.text,flag:false}); 
        $scope.text = &#39;&#39;; 
      } 
      $scope.done = function(key){ 
      var todo = $scope.todos.splice(key,1)[0]; 
      todo.flag = true; 
      $scope.doneTodos.push(todo); 
      // console.log($scope.todos.splice(key,1)); 
      } 
      $scope.delete = function(todos,key){ 
        todos.splice(key,1); 
      } 
    }]); 
  </script> 
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

原生ajax写的上拉加载实例（图文教程）

利用ajax提交form表单到数据库详解(无刷新)

基于Ajax和forms组件实现注册功能（含有代码）

Atas ialah kandungan terperinci AngularJS tab栏实现和mvc小案例（图文教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：nuxt框架中路由鉴权之Koa与Session使用方法Artikel seterusnya：React+ajax+java实现上传图片并预览功能（图文教程）

Artikel berkaitan

Lihat lagi