I would like to show three lists horizontally. Can anyone give me some hints if using angularjs?
This is I want to show in the page:
List1 List2 List3
*list1_item1 *list2_item1 *list3_item1
*list1_item2 *list2_item2 *list3_item2
*list1_item3 *list2_item3 *list3_item3
There are also some boundary lines shown among lists.
Thanks
Use ng-repeat for each of three horizontally placed divs and put the list in.
You can user this with pure CSS. Just float your div's to the left. If you are required use an ng-repeat like
<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>
Here is a plunkr for it.
What you are looking for is the NgRepeat directive and just 3 divs with some simple css.
Here is a little demo of what you want. 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;
}]);
