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博主原创文章，未经博主允许不得转载。