[英]List items using angularjs
我想橫向展示三個列表。 如果使用angularjs,任何人都可以給我一些提示嗎?
這是我想在頁面中顯示:
List1 List2 List3
*list1_item1 *list2_item1 *list3_item1
*list1_item2 *list2_item2 *list3_item2
*list1_item3 *list2_item3 *list3_item3
列表中還顯示了一些邊界線。
謝謝
對三個水平放置的div中的每一個使用ng-repeat並將列表放入。
您可以使用純CSS來使用它。 只需將你的div漂浮到左邊。 如果您需要使用ng-repeat之類的
<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>
這是一個吸塵器。
您正在尋找的是NgRepeat指令,只有3個div和一些簡單的CSS。
這是一個你想要的小演示。 密碼筆
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;
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.