angularjs를 사용하는 목록 항목

Question

3 개의 목록을 가로로 표시하고 싶습니다. angularjs를 사용하는 사람은 어떤 힌트를 줄 수 있습니까?

List1    List2    List3 

*list1_item1  *list2_item1  *list3_item1 
*list1_item2  *list2_item2  *list3_item2 
*list1_item3  *list2_item3  *list3_item3 

도 목록 중 표시된 일부 경계선이 있습니다

이것은 내가 페이지에 표시 할 수 있습니다.

감사

Answer 1

사용 세 수평으로 배치 된 div의 각 NG 반복와의 목록을 넣어.

Answer 2

당신이 할 수있는 사용자이 순수 CSS와. div를 왼쪽으로 띄우십시오. 당신이 사용 필요한 경우

<div ng-repeat="list in lists"> 
    <li ng-repeat="item in list"> {{item.name}} </li> 
</div> 




<div style="float:left;"> 
    <h1>LIST ITEM 1</h1> 
    <li>list1_item1 </li> 
    <li> list1_item2 </li> 
    <li> list1_item3 </li> 
    </div> 

    <div style="float:left"> 
    <h1>LIST ITEM 2</h1> 
    <li>list2_item1 </li> 
    <li> list2_item2 </li> 
    <li> list2_item3 </li> 
    </div> 

    <div style="float:left;"> 
    <h1>LIST ITEM 3</h1> 
    <li>list3_item1 </li> 
    <li> list3_item2 </li> 
    <li> list3_item3 </li> 
    </div> 

는 여기에 대한 plunkr이 같은 는 NG-반복합니다.

http://plnkr.co/edit/WmQHQCQtn6b4kb7EFtvz?p=preview

Answer 3

은 무엇 당신이 찾고있는 것은 NgRepeat 지침과 몇 가지 간단한 CSS로 불과 3 div의입니다.

여기에 원하는 데모가 있습니다. Code Pen

HTML

<h3>Three Lists</h3> 
<div ng-app="threeListsApp" ng-controller="ctrl"> 
    <ul> 
    <div class="itemClmn"> 
     <h4>items A</h4> 
     <p ng-repeat="(country,goals) in itemsA">{{country}} : {{goals}}</p> 
    </div> 
    <div class="itemClmn"> 
     <h4>items B</h4> 
     <p ng-repeat="bItem in itemsB">{{bItem.name}}: {{bItem.gender}}</p> 
    </div> 
    <div class="itemClmn"> 
     <h4>items C</h4> 
     <p ng-repeat="cItem in itemsC">{{cItem[0]}}: {{cItem[1]}}</p> 
    </div> 
    </ul> 
</div> 

CSS 다른 각도와 다른

.itemClmn 
{ 
    position: relative; 
    float: left; 
    width: 130px; 
} 

JS

var a = { 
    "India": "2", 
    "England": "2", 
    "Brazil": "3" 
}; 
var b = [{ 
    name: "Jim", 
    gender: "M" 
}, { 
    name: "Jane", 
    gender: "F" 
}, { 
    name: "Robyn", 
    gender: "F" 
}]; 
var c = [ 
    ["Blue", "1"], 
    ["Green", "2"], 
    ["Red", "3"] 
]; 

angular 
.module('threeListsApp', []) 
.controller('ctrl', ['$scope', function ($scope) { 
    $scope.itemsA = a; 
    $scope.itemsB = b; 
    $scope.itemsC = c; 
}]);