AngularJS学习第三天：用户地址管理

相关文章推荐

Angular学习第一天：登录功能
Angular学习第二天：tab标签页切换效果

今天我们来做一下电商网站常见的地址管理功能

实现功能

• 显示地址列表
• 设置默认地址
• 删除某地址
• 当用户没有地址时，显示没有地址

首先我们来看下实际运行效果

地址管理.png

页面相关样式

*{
    padding:0px;
    margin:0px;
    font-family:Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
html{
  font-size: 10px;
}
body{
  background-color: #f8f8f8;
}
.address-item{
  font-size: 1.8rem;
  background-color: #ffffff;
  margin-bottom:10px;
}
.item-op{
  color: #FF4354;
  padding: 10px 15px;
  border-bottom: 1px solid #f8f8f8;
}
a:link,a:visited{
  color: #FF4354;
}
.item-con{
  padding: 10px 15px;
}
.c_333{
  color: #333;
}
.f-r{
  float: right;
}
.item-btn{
  display: inline-block;
  padding: 0px 10px;
  margin-left: 10px;
}
.nothing{
  font-size: 1.8rem;
  text-align: center;
  line-height: 150%;
  background-color: #ffffff;
  padding: 50px 0;
}

地址管理的控制器【数据准备与方法计划】

• 用户地址数组
• 设置默认地址方法
• 删除地址方法
• 查找元素真正索引方法

HtML结构

 

   

      

        默认地址
        设为默认
        删除
        编辑
      
      

        
{{item.name}}  {{item.mobile}}
        
{{item.address}}
      
   
 



    

     当前还没有地址
   

涉及指令及说明

• ng-repeat 的数据集合必须是数组或对象
• ng-repeat 指令声明在需要循环内容的元素上，address_list 和控制器上的变量名对应，item是为数组中单个对象起的别名。
• ng-repeat 指令接受表达式，【基本表达式格式为 item in items 】，他定义了如何循环集合，
  另外两种格式

(key, value) in myObj    => (key,item) in address_list

x in records track by $id(x)   => item in address_list track by item.id
//用ng-repeat指令遍历一个javascript数组，当数组中有重复元素的时候,
//angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象。
//对于数字或者字符串等基本数据类型来说，它的id就是它自身的值。
//因此数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。
// 业务上自己生成唯一的id
item in items track by item.id
//或者直接拿循环的索引变量$index来用
item in items track by $index
//如果是javascript对象类型数据，那么就算内容一摸一样，
ng-repeat也不会认为这是相同的对象。
如果将上面的代码中dataList，那么是不会报错的。
比如$scope.dataList = [{"age":10},{"age":10}];

• 对于ng-repeat angular 提供了几个变量来供我们使用
  $index 可以返回当前引用对象的索引，从0开始
  $first 返回布尔值，表明元素是不是集合的第一个元素

ng-class="{active:$first}"    //比如我们只给第一个元素增加**active样式**

$middle 返回布尔值，表明元素不是集合第一个也不是最后一个元素【即中间】
$last 返回布尔值，表明元素是不是集合中的最后一个元素。

• ng-if 这个指令跟我们做tab标签页实例时的 ng--show ng-hide 指令类似，接受参数为表达式，表达式返回值为布尔类型，如果表达式返回值为 true 则元素会显示在页面上，否则则不显示
• ng-if与 ng--show ng-hide 看起来功能一样，有什么不同吗？
  不同在于，ng--show ng-hide指令的显示或者不显示是设置 display:none (block)来实现的，而ng-if隐藏时会直接删除节点
• 地址列表管理功能中，ng-if指令根据address_list的length属性判断是否显示 “当前还没有地址”

今天的实例如何？妈妈再也不用担心我以后拼接字符串拼到吐了！！！！！