今天我們來(lái)做一下電商網(wǎng)站常見(jiàn)的地址管理
實(shí)現(xiàn)功能
- 顯示地址列表
- 設(shè)置默認(rèn)地址
- 刪除某地址
- 當(dāng)用戶沒(méi)有地址時(shí)，顯示沒(méi)有地址
首先我們來(lái)看下實(shí)際運(yùn)行效果
2180072-7ca0f33ba7d052e5.png
頁(yè)面相關(guān)樣式
*{
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;
}
用戶管理的控制器【數(shù)據(jù)準(zhǔn)備與方法計(jì)劃】
- 用戶地址數(shù)組
- 設(shè)置默認(rèn)地址方法
- 刪除地址方法
- 查找元素真正索引方法
<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:"如來(lái)佛祖",mobile:'15625555555',address:'西天'}
]
//設(shè)置默認(rèn)地址
$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;
}
//獲取數(shù)組元素的真實(shí)索引
$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;
}
//刪除數(shù)組元素
$scope.del=function(id){
var relIndex=$scope.getRealIndex(id);
$scope.address_list.splice(relIndex,1);
}
}
</script>
HTML結(jié)構(gòu)
<body ng-app="" ng-controller="myTabCtrl">
<!--地址列表開(kāi)始-->
<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" >默認(rèn)地址</span>
<span ng-if="!item.isDefault" class="c_333" ng-click="set_default(item.id)">設(shè)為默認(rèn)</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>
<!--地址列表結(jié)束-->
<!--沒(méi)有地址時(shí)顯示-->
<div class="nothing" ng-if="address_list.length==0">
當(dāng)前還沒(méi)有地址
</div>
<!--沒(méi)有地址時(shí)顯示/-->
</body>
涉及指令及說(shuō)明
ng-repeat的數(shù)據(jù)集合必須是數(shù)組或?qū)ο?/p>
ng-repeat 指令聲明在需要循環(huán)內(nèi)容的元素上，address_list 和控制器上的變量名對(duì)應(yīng)，item是為數(shù)組中單個(gè)對(duì)象起的別名。
ng-repeat 指令接受表達(dá)式，【基本表達(dá)式格式為 item in items 】，他定義了如何循環(huán)集合，
另外兩種格式
(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指令遍歷一個(gè)javascript數(shù)組，當(dāng)數(shù)組中有重復(fù)元素的時(shí)候,
//angularjs會(huì)報(bào)錯(cuò),這是因?yàn)閚g-Repeat不允許collection中存在兩個(gè)相同Id的對(duì)象。
//對(duì)于數(shù)字或者字符串等基本數(shù)據(jù)類型來(lái)說(shuō)，它的id就是它自身的值。
//因此數(shù)組中是不允許存在兩個(gè)相同的數(shù)字的。為了規(guī)避這個(gè)錯(cuò)誤，需要定義自己的track by表達(dá)式。
// 業(yè)務(wù)上自己生成唯一的id
item in items track by item.id
//或者直接拿循環(huán)的索引變量$index來(lái)用
item in items track by $index
//如果是javascript對(duì)象類型數(shù)據(jù)，那么就算內(nèi)容一摸一樣，
ng-repeat也不會(huì)認(rèn)為這是相同的對(duì)象。
如果將上面的代碼中dataList，那么是不會(huì)報(bào)錯(cuò)的。
比如$scope.dataList = [{"age":10},{"age":10}];
- 對(duì)于ng-repeat angular提供了幾個(gè)變量來(lái)供我們使用
$index 可以返回當(dāng)前引用對(duì)象的索引，從0開(kāi)始
$first 返回布爾值，表明元素是不是集合的第一個(gè)元素
ng-class="{active:$first}" //比如我們只給第一個(gè)元素增加**active樣式**
$middle 返回布爾值，表明元素不是集合第一個(gè)也不是最后一個(gè)元素【即中間】
$last 返回布爾值，表明元素是不是集合中的最后一個(gè)元素。
ng-if 這個(gè)指令跟我們做tab標(biāo)簽頁(yè)實(shí)例時(shí)的 ng--show ng-hide 指令類似，接受參數(shù)為表達(dá)式，表達(dá)式返回值為布爾類型，如果表達(dá)式返回值為 true 則元素會(huì)顯示在頁(yè)面上，否則則不顯示
ng-if與 ng--show ng-hide 看起來(lái)功能一樣，有什么不同嗎？
不同在于，ng--show ng-hide指令的顯示或者不顯示是設(shè)置 display:none (block)來(lái)實(shí)現(xiàn)的，而ng-if隱藏時(shí)會(huì)直接刪除節(jié)點(diǎn)地址列表管理功能中，ng-if指令根據(jù)address_list的length屬性判斷是否顯示 “當(dāng)前還沒(méi)有地址”
今天的實(shí)例如何？
