angularjs常见功能写法

常用的功能写法

angularJS实现选项卡功能

html

<ul>  <li ng-class="{'active':data.current == 1}" ng-click="action(1)">选项卡1</li>  <li ng-class="{'active':data.current == 2}" ng-click="action(2)">选项卡2</li></ul><div>  <div ng-if="data.current == 1" class="box1">one</div>  <div ng-if="data.current == 2" class="box2">two</div></div>

js

$scope.data = {  current:"1"};$scope.action=function(param){  $scope.data.current(param);}

angularJs实现伸缩功能=>显示和隐藏

第一种写法：

html

<a ng-click="shrink()">  <i ng-if="flag" class="fa fa-chevron-down"></i>  <i ng-if="!flag" class="fa fa-chevron-up"></i></a><div ng-show="!flag">内容</div>

js

$scope.shrink=function(){  $scope.flag = !scope.flag;}

第二种写法：

html

<div ng-if="show" class="fade"></div><button ng-click="show =!show">toggle</button>

css

div{width:160px;height:160px;background:red}.fade{transition:1s liner all}.fade.ng-enter{opacity:0;}.fage.ng-enter.ng-enter-active{opacity:1}.fade.ng-leave{opacity:1;}.fage.ng-leave.ng-enter-active{opacity:0}

angularJS实现多功能栏和导航的切换

html

<!-- 导航 --><div id="navbar">  <ul>    <li onclick="createNewTab(this)" tab-href="../Home/Index_v1" tab-title="首页">      <a href="#" class="nav-a">        <span class="round">            <span class="fa fa-home"></span>        </span>        <span class="nav-text">首 页</span>      </a>    </li>     <li onclick="createNewTab(this)" tab-href="../Query/OnekeyQuery" tab-title="一键查询" ng-click="createNewNav('1')">      <a href="#" class="nav-a">        <span class="round">            <span class="fa fa-home"></span>        </span>        <span class="nav-text">一键查询</span>      </a>    </li>  </ul></div><!-- 主要内容 --><div class="container-fluid">  <!-- 左边 -->  <div class="sidebar mian-left">    <!-- 菜单 -->    <ul class="nav nav-sidebar" id="side-menu">      <li ng-repeat="x in List" repeat-finish>        <a class="J_menuItem no-submenu" href="#" tab-href="{{x.href}}" tab-title="{{x.name}}" onclick="createNewTab(this)">{{x.name}}<span class="fa arrow" ng-if="x.children"></span></a>        <ul class="nav nav-second-level">            <li ng-repeat="y in x.children">                <a href="#" class="J_menuItem no-submenu" tab-href="{{y.href}}" tab-title="{{y.name}}" onclick="createNewTab(this)">{{y.name}}</a>            </li>        </ul>      </li>    </ul>  </div>  <!-- 右边 -->  <div class="main-right">      <div class="row content-tabs">          <!-- 全屏显示 -->          <a class="roll-nav roll-left J_tabLeft" ng-click="seeDetialInNewWindow()" hhref="javascript:void(0)">              <i class="fa fa-expand"></i>          </a>          <a class="roll-nav  J_tabLeft" style="margin-left:40px;">              <i class="fa fa-backward"></i>          </a>          <nav class="page-tabs J_menuTabs">              <div class="page-tabs-content">                  <a href="javascript:;" class="active J_menuTab" data-id="../Home/Index_v1">首页</a>              </div>          </nav>          <a class="roll-nav roll-right J_tabRight">              <i class="fa fa-forward"></i>          </a>      </div>      <div class="row J_mainContent" id="content-main">          <iframe class="J_iframe" name="iframe0" width="100%" height="100%" frameborder="0" data-id="../Home/Index_v1" src="../Home/Index_v1" seamless="" style="display: inline;"></iframe>      </div>  </div></div>

js

$scope.createNewNav = function(a){  switch(a){    case "1":       $scope.List = [        {            "name": "一键查询",            "href": "../Query/OnekeyQuery",            //"icon": "fam-onekey"        }, {            "name": "全文查询",            "href": "../Query/FullTextQuery",            //"icon": "fam-onekey"        }, {            "name": "MAC查询",            "href": "../Query/MacQuery",        }, {            "name": "热点信息查询",            //"href": "../Query/SSIDQuery",            "children": [                {                    "name": "SSID查询",                    //"href": "../Query/SSIDnewQuery"                    "href": "../Query/SSIDQuery"                }, {                    "name": "AP连接查询",                    "href": "../Query/AP_ConnectionQuery"                }, {                    "name": "连接日志",                    "href": "../Query/Connectionrecord"                }            ]        }, {            "name": "真实身份查询",            "href": "../Query/RealIdentityQuery",            //"icon": "fam-house"        }, {            "name": "虚拟身份查询",            "href": "../Query/VirtualIdentityQuery"        }, {            "name": "基站查询",            "href": "../Query/BaseStationQuery",            //"icon": "fam-house"        }    ];  }}

|版权声明：本文为summer博主原创文章，未经博主允许不得转载。