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

!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"> 
  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>你認真的說你喜歡白山茶/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> 

!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()"> 
        !-- 用戶輸入點 --> 
          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){ 
      // 定義一個數(shù)組存儲用戶輸入的數(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>