今天我們來做一下電商網站常見的地址管理
實現功能
- 顯示地址列表
- 設置默認地址
- 刪除某地址
- 當用戶沒有地址時，顯示沒有地址
首先我們來看下實際運行效果
2180072-7ca0f33ba7d052e5.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屬性判斷是否顯示 “當前還沒有地址”
今天的實例如何？
