AngularJS tab欄實(shí)現(xiàn)和mvc小案例實(shí)例詳解

更新時(shí)間：2017年05月25日 08:36:41 作者：姑娘的代碼

這篇文章主要介紹了angularJS tab欄實(shí)現(xiàn)和mvc小案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

tab欄:

代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Tab 標(biāo)簽</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"> 
  <div class="tabs" ng-controller="TabsController"> 
    <nav> 
    <!-- 指令之間沒有分號 --> 
      <a href="javascript:;" ng-class="{active: type == 'local'}" ng-mouseover="switch('local')">白山茶</a> 
      <a href="javascript:;" ng-class="{active: type == 'global'}" ng-mouseover="switch('global')">作曲</a> 
      <a href="javascript:;" ng-class="{active: type == 'sports'}" ng-mouseover="switch('sports')">背景</a> 
      <a href="javascript:;" ng-class="{active: type == 'funny'}" ng-mouseover="switch('funny')">歌詞</a> 
    </nav> 
    <div 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>你認(rèn)真的說你喜歡白山茶</li> 
          <li>怡然自得的收起別的紅玫瑰</li> 
          <li>你溫柔的說你眷戀我</li> 
          <li>然后迫不及待的愛別人</li> 
          <li>然后迫不及待的愛別人</li> 
          <li>然后迫不及待的愛別人</li> 
          <li>然后迫不及待的愛別人</li> 
        </ol> 
      </section> 
    </div> 
  </div> 
  <script src="../../js/angular.min.js"></script> 
  <script> 
    angular.module('Tabs',[]).controller('TabsController',['$scope',function($scope){ 
       $scope.type = 'local'; 
       $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'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()"> 
        <!-- 用戶輸入點(diǎn) --> 
          <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"> 
            <div class="view"> 
              <input type="checkbox" class="toggle" ng-click="done(key)" > 
              <label>{{todo.text}}</label> 
              <button class="destroy" ng-click="delete(todos,key)" ></button> 
            </div> 
            <input class="edit" value="Create a TodoMVC template"> 
          </li> 
          <li><h5>已完成</h5></li> 
          <li class="completed" ng-repeat="todo in doneTodos"> 
            <div class="view"> 
              <input class="toggle" type="checkbox" ng-checked="todo.flag" > 
              <label>{{todo.text}}</label> 
              <button class="destroy" ng-click="delete(doneTodos,key)"></button> 
            </div> 
            <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 >Sindre Sorhus</a></p> 
      <p>Created by <a >you</a></p> 
      <p>Part of <a >TodoMVC</a></p> 
    </footer> 
  </body> 
  <script src="../../js/angular.min.js"></script> 
  <script> 
    angular.module('Todos',[]).controller('TodoController',['$scope',function($scope){ 
      // 定義一個(gè)數(shù)組存儲(chǔ)用戶輸入的數(shù)據(jù) 
      $scope.todos = []; 
      $scope.doneTodos = []; 
      $scope.add = function(){ 
        $scope.todos.push({text:$scope.text,flag:false}); 
        $scope.text = ''; 
      } 
      $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>

以上所述是小編給大家介紹的AngularJS tab欄實(shí)現(xiàn)和mvc小案例實(shí)例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: