AngularJS學(xué)習(xí)第三天：用戶(hù)地址管理

相關(guān)文章推薦

Angular學(xué)習(xí)第一天：登錄功能
Angular學(xué)習(xí)第二天：tab標(biāo)簽頁(yè)切換效果

今天我們來(lái)做一下電商網(wǎng)站常見(jiàn)的地址管理功能

實(shí)現(xiàn)功能

  • 顯示地址列表
  • 設(shè)置默認(rèn)地址
  • 刪除某地址
  • 當(dāng)用戶(hù)沒(méi)有地址時(shí)，顯示沒(méi)有地址

首先我們來(lái)看下實(shí)際運(yùn)行效果

地址管理.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ì)劃】

  • 用戶(hù)地址數(shù)組
  • 設(shè)置默認(rèn)地址方法
  • 刪除地址方法
  • 查找元素真正索引方法
<script>
    function myTabCtrl($scope){
        //用戶(hù)地址列表
        $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ū)ο?/li>
  • 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)型來(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ì)象類(lèi)型數(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 指令類(lèi)似，接受參數(shù)為表達(dá)式，表達(dá)式返回值為布爾類(lèi)型，如果表達(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í)例如何？媽媽再也不用擔(dān)心我以后拼接字符串拼到吐了?。。。?！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容