CODEWITHSUNDEEP
javascriptangularjs
michelle
michelle

Reputation: 197

List items using angularjs

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

Upvotes: 1

Views: 96

Answers (3)

NotARobot
NotARobot

Reputation: 978

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;
}]);

Upvotes: 0

Mike T
Mike T

Reputation: 11

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.

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

Upvotes: 0

binariedMe
binariedMe

Reputation: 4329

Use ng-repeat for each of three horizontally placed divs and put the list in.

Upvotes: 3

Related Questions