Home > Article > Web Front-end > AngularJS tab bar implementation and mvc small case (graphic tutorial)

AngularJS tab bar implementation and mvc small case (graphic tutorial)

亚连Original: 2018-05-22 14:07:501358browse

This article mainly introduces the angularJS tab bar implementation and mvc small case. This article introduces it to you in great detail through example code. Friends in need can refer to the

tab bar:

##Code:

<!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 small case:

Code:

<!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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Pull-up loading example written in native ajax (graphic tutorial)

Use ajax to submit the form to the database Detailed explanation (no refresh)

Registration function based on Ajax and forms components (including code)

The above is the detailed content of AngularJS tab bar implementation and mvc small case (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use Koa and Session for routing authentication in nuxt frameworkNext article：How to use Koa and Session for routing authentication in nuxt framework

See more

AngularJS tab bar implementation and mvc small case (graphic tutorial)

Related articles