angular学习第二天

今天的实例是什么？

是一个前端常见的tab标签页切换效果（效果预览如下）

2180072-c814ce4716dff01a.png

涉及指令

• ng-controller
• ng-show
• ng-class
• ng-click

实现步骤与说明

实现逻辑
a.实现逻辑是我们设置一个变量（focusIndex）记录当前聚焦的是哪个
b.设置一个函数（focus）来改变当前聚焦的tab
c.当focusIndex==0的时候让 优选圈内容 显示， 优选圈 所属的a标签添加上聚焦样式"active"样式

*{
    padding:0px;
    margin:0px;
    font-size:10px;
    font-family:Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
.page{
    background-color:#f8f8f8;
    position: absolute;
    top: 0px;
    padding-top:50px;
    left: 0px;
    right: 0px;
    bottom: 60px;
    overflow: auto;
    text-align: left;
    text-align: center;
    font-size: 2rem;
}
nav{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 60px;
    display: flex;
    border-top:1px solid #ededed;
    background-color: #fff;
}

nav a:link,nav a:visited{
    text-decoration:none;
    flex: 1;
    text-align: center;
    box-sizing: border-box;
    /*      border-right: 1px solid #ededed;*/
    color: #666;
    padding-top: 5px;
}
nav a:last-child{
    border-right: none;
}
nav a.active{
    color: #FF4354;
}
nav a i{
    display: block;
    margin: 0 auto;
    width: 25px;
    height: 25px;
}
nav a.home.active i{
      background: url('images/nav-home-on.png') no-repeat center;
      background-size: contain;
    }
nav a.home i{
      background: url('images/nav-home-off.png') no-repeat center;
      background-size: contain;
    }
nav a.topics.active i{
      background: url('images/nav-circle-on.png') no-repeat center;
      background-size: contain;
    }
nav a.topics i{
      background: url('images/nav-circle-off.png') no-repeat center;
      background-size: contain;
    }
nav a.message.active i{
      background: url('images/nav-message-on.png') no-repeat center;
      background-size: contain;
    }
nav a.message i{
      background: url('images/nav-message-off.png') no-repeat center;
      background-size: contain;
    }
nav a.user.active i{
      background: url('images/nav-mine-on.png') no-repeat center;
      background-size: contain;
    }
nav a.user i{
      background: url('images/nav-mine-off.png') no-repeat center;
      background-size: contain;
    }

第一种写法HTML结构和js

//JS

 
    

//HTML


 

     
优选圈内容
     
游记内容
     
购物车内容
     
个人中心内容
 
  

   优选圈
   游记
   购物车
   个人中心
  

说明

• ng-show 根据 = 号后边的js表达式，决定是否显示还是隐藏节点

ng-show="我是一个返回布尔值的表达式"
比方你可以写 1==2 某个变量 某个变量=1 某个变量！=1

• 有一个与ng-show功能相似的指令ng-hide同样接受一个返回布尔值表达式

• ng-class 指令 允许我们在程序运行的时候给元素添加class
  （1）有时候我们需要程序来确定要给一个元素什么样式，我们可以这么做

$scope.addClass="newclass"
ng-class="addClass"
//加入元素之前有样式 user 程序运行后的样式为　class="user newclass"

（2）有时候我们需要根据某个变量的值来确定是否给一个元素某样式（比如我们上边程序中我们用focusIndex是否等于tab的索引来判断加不加active这个样式），我们可以这么做

$scope.focusIndex=0;
ng-class="{'active':focusIndex==0,class2:condition2}"
//这种写法接受一个对象，属性是要添加的样式，值是判断条件

分割线

---

有人说，判断条件好长啊，我习惯自己写代码添加和删除样式，OK！No problem
我提供了第二种写法

//JS

 
    

//HTML


 

     
优选圈内容
     
游记内容
     
购物车内容
     
个人中心内容
 
  

   优选圈
   游记
   购物车
   个人中心