學(xué)習(xí)ng-repeat的過(guò)程中常常使用到ng-repeat=”item in array”來(lái)循環(huán)輸出所需要的元素，但是當(dāng)我們需要使用ng-repeat進(jìn)行多層嵌套時(shí)則容易出現(xiàn)數(shù)據(jù)重復(fù)的問(wèn)題。

如在加載與點(diǎn)擊事件于js中進(jìn)行兩次http請(qǐng)求獲取data分別為list01[]數(shù)組和list02[]賦值再如下顯示則會(huì)導(dǎo)致it1下每個(gè)ul都會(huì)重復(fù)輸出list02[]數(shù)組中的內(nèi)容

<ul ng-repeat="it1 in list01">  <li ng-click="show(it1)">{{it1.value}}</li>  <ul ng-repeat="it2 in list02">    <li>{{it2.value}}</li>  </ul></ul>

輸出如：

  1-1  1-2  1-1  1-2

而非

  1-1  1-2  2-1  2-2

其實(shí)這個(gè)也不是問(wèn)題，只要換一種思維方式將列表和父級(jí)元素相關(guān)聯(lián)形成樹(shù)狀結(jié)構(gòu)就好了

HTML中代碼如下

<ul ng-repeat="it1 in list01">  <li ng-click="show(it1)">{{it1.name}}</li>  <ul ng-repeat="it2 in it1.child" ng-show="it1.showChild" style="text-indent:10px;">    <li ng-click="show(it1, it2)">{{it2.name}}</li>    <ul ng-repeat="it3 in it2.child" ng-show="it2.showChild" style="text-indent:10px;">      <li ng-click="show(it1, it2, it3)">{{it3.name}}</li>      <ul ng-repeat="it4 in it3.child" ng-show="it3.showChild">        <li>{{it4.name}}</li>      </ul>    </ul>  </ul></ul>

js中代碼如下

$http.get('ng01.json').success(function (_data) {  $scope.list01 = [];  $scope.list01 = _data.data;});$scope.show = function (it1, it2, it3) {  if(it3 != null){    $http.get("ng04.json").success(function (_data) {      $scope.list04 = [];      $scope.list04 = _data.data;      for(var x in $scope.list03){        $scope.list03[x].showChild = false;      }      it3.showChild = true;      it3.child = _data.data;     });     return;  }  if(it2 != null){    $http.get("ng03.json").success(function (_data) {      $scope.list03 = [];      $scope.list03 = _data.data;      for(var x in $scope.list02){        $scope.list02[x].showChild = false;      }      it2.showChild = true;      it2.child = _data.data;    });    return;  }  $http.get("ng02.json").success(function (_data) {    $scope.list02 = [];    $scope.list02 = _data.data;    for(var x in $scope.list01){      $scope.list01[x].showChild = false;    }    it1.showChild = true;    it1.child = _data.data;  });}

json文件都是這樣的

{ "success":1, "data":[  {"name":"01"},  {"name":"02"} ]}

總結(jié)

以上所述是小編給大家介紹的Angular中ng-repeat與ul li的多層嵌套，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！