相关文章推荐
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;
}
地址管理的控制器【数据准备与方法计划】
- 用户地址数组
- 设置默认地址方法
- 删除地址方法
- 查找元素真正索引方法
<script>
function myTabCtrl($scope){
//用户地址列表
$scope.address_list=[
{isDefault:true,id:10,name:"唐三藏",mobile:'15625555555',address:'东土大唐'},
{isDefault:false,id:1,name:"孙悟空",mobile:'15625555555',address:'花果山水帘洞'},
{isDefault:false,id:5,name:"猪八戒",mobile:'15625555555',address:'高老庄'},
{isDefault:false,id:3,name:"沙和尚",mobile:'15625555555',address:'流沙河'},
{isDefault:false,id:4,name:"玉兔精",mobile:'15625555555',address:'银河系广寒宫'},
{isDefault:false,id:23,name:"如来佛祖",mobile:'15625555555',address:'西天'}
]
//设置默认地址
$scope.set_default=function(id){
var relIndex=$scope.getRealIndex(id);
for(var i=0;i<$scope.address_list.length;i++){
$scope.address_list[i].isDefault=false;
}
$scope.address_list[relIndex].isDefault=true;
}
//获取数组元素的真实索引
$scope.getRealIndex=function(id){
var relIndex=-1;
for(var i=0;i<$scope.address_list.length;i++){
if($scope.address_list[i].id==id){
relIndex=i;
break;
}
}
return relIndex;
}
//删除数组元素
$scope.del=function(id){
var relIndex=$scope.getRealIndex(id);
$scope.address_list.splice(relIndex,1);
}
}
</script>
HtML结构
<body ng-app="" ng-controller="myTabCtrl">
<!--地址列表开始-->
<div class="address-list" ng-if="address_list.length>0">
<div class="address-item" ng-repeat="item in address_list">
<div class="item-op">
<span ng-if="item.isDefault" >默认地址</span>
<span ng-if="!item.isDefault" class="c_333" ng-click="set_default(item.id)">设为默认</span>
<span class="item-btn f-r" ng-click="del(item.id)">删除</span>
<span class="item-btn f-r"><a>编辑</a></span>
</div>
<div class="item-con">
<p>{{item.name}} {{item.mobile}}</p>
<p>{{item.address}}</p>
</div>
</div>
</div>
<!--地址列表结束-->
<!--没有地址时显示-->
<div class="nothing" ng-if="address_list.length==0">
当前还没有地址
</div>
<!--没有地址时显示/-->
</body>
涉及指令及说明
- 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属性判断是否显示 “当前还没有地址”
今天的实例如何？妈妈再也不用担心我以后拼接字符串拼到吐了！！！！！
