두 div의 AngularJs 나누기 목록

Question

AngularJs를 처음 사용했습니다. 사이드 바 내부에있는 div 태그에 표시 할 요소 목록이 있습니다. 목록에 많은 요소가 포함되어 있으며 하나의 div 태그 대신 두 개의 열에 항목 목록을 표시 할 계획입니다.

Angularjs에서 두 개의 div로 목록을 표시 할 수 있도록 목록을 두 개의 섹션으로 나누려면 어떻게해야합니까?

<div class="row"> 
    <div class="col-lg-6" > 
     <ul class="list-unstyled"> 
     <li ng-repeat="tag in primTags"><a ng-click="select(tag.tagId, tag.name)">{{tag.name}}</a> 
     </li> 
     </ul> 
    </div> 

    <div class="col-lg-6" > 
     <ul class="list-unstyled"> 
     <li></li> 
     </ul> 
    </div> 
    </div> 

Answer 1

다음과 같은 것이 필요합니까?

$scope.sublistA = $scope.list.map(function(listItem) { return listItem.propertyA; }); 
$scope.sublistB = $scope.list.map(function(listItem) { return listItem.propertyB; }); 

그런 다음 두 개의 $ scope 하위 목록에서 ng-repeat를 수행하십시오.

Answer 2

목록을 똑같이 정렬하려는 경우 컨트롤러에 @aet이 설명한대로 두 개의 별도 목록을 유지할 수 있습니다. 그러나 최신 상태로 유지하려면 $scope.$watchCollection을 사용해야합니다.

http://jsfiddle.net/6Kzs9/1/

$scope.$watchCollection('list', function(newVal) { 
    var a = [], b = [], newLength = newVal.length; 
    for (var i = 0; i < newLength; i++) { 
     if (i % 2 === 0) { 
      a.push(newVal[i]) 
     } else { 
      b.push(newVal[i]) 
     } 
    } 
    $scope.listA = a; 
    $scope.listB = b; 
}); 

(당신은 가장 확실하게 성능을 개선하고이 코드를 최적화 할 수 있습니다)

Answer 3

좋아, 내 다른 대답을 무시합니다. 그것은 순진하고 재사용 할 수없는 방식입니다.

각도 방식은 필터를 사용합니다. 왜? 우리는 실제로 데이터의 의미를 바꾸지 않고 다르게 제시하기 때문에.

따라서 $scope.list을 균등하게 분할 된 목록으로 필터링하고 싶습니다.

우선이 필터는 2 열 필터입니다. 동일한 기술을 사용하여 n 열을 만들 수도 있지만, 이는 당면한 문제에 대한 간단한 해결책 일뿐입니다.

지금 우리의 템플릿에, 우리는 할 수 있습니다

<li ng-repeat="item in list | columns:0">{{item}}</li> 

그런 식으로, 우리는 목록 또는 설치 어떤 $watch 기능의 세 세트를 유지함으로써 스스로를 반복 할 필요가 없습니다. list을 업데이트하면 UI가 업데이트됩니다. 내가 처음에 존 자크 '대답을 사용하지만 http://jsfiddle.net/V3K2g/6/

Answer 4

, 나는 각도가 실제로 다른 구문 (스타일)을 사용 실현이에 대한 :

다음은 jsfiddle입니다. 여기

는 필터가 그 두 개의 열을 가정처럼 보이는, 반환 할 항목의 목록을 필터링 무엇 홀수 또는 항목 :

app.filter('columnFilter', function() 
{ 
    return function(items, columnNumber) 
    {     
     var toReturn = []; 
     for (var i = 0; i < items.length; i++) 
     { 
      if (i % 2 == columnNumber) 
      { 
       toReturn.push(items[i]); 
      } 
     } 
     return toReturn; 
    } 
});