How to display two lists side by side
Question
I know this is kind of a stupid question but I can't figure it out why I can't do this. I've been searching through Stack Overflow but the answers only work without the AngularJS. I can't get two lists to display side by side. I'm using ng-repeat to get the lists to display but they both end up in a line. For some reason it works perfectly fine without the repeat. This code snippet won't work because I need two html files but here it is.
var app = angular.module("app", []) .controller("CustomDirectiveController", function ($scope) { $scope.list = ["google", "yahoo", "stack overflow"]; $scope.linkList = ["google+.com", "yahoo.com", "stackoverflow.com"]; }); app.directive('directiveOne', function () { return { templateUrl: 'put some like here or something' }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular JS Testing</title> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="app" ng-controller="CustomDirectiveController"> <div directive-one></div> </div> </body> </html> <!--the template--> <ul style="width:6%; float:left;" ng-repeat="links in linkList"> <li>{{list}}</li> </ul> <ul style="width:6%; float:left;" ng-repeat="projects in projectList"> <li>{{linkList}}</li> </ul>
1 answers
solution1
1 ACCPTED 2016-04-28 15:16:12
You need to repeat the elements of the list (the li s) not the lists themselves (the ul s).
I assume that projectList is supposed to be just list, as that is what you define on the scope.
In the ng-repeat, the name before the in should be singular. That is the name that you need to use inside the li for each item.
Also, you don't need to put the template in a separate file, you can put it inline as the template parameter, instead of templateUrl . This means you can make it work in a snippet.
var app = angular.module("app", []) .controller("CustomDirectiveController", function ($scope) { $scope.list = ["google", "yahoo", "stack overflow"]; $scope.linkList = ["google+.com", "yahoo.com", "stackoverflow.com"]; }); app.directive('directiveOne', function () { return { template: '<ul style="width:40%; float:left;">' +'<li ng-repeat="link in linkList">{{link}}</li>' +'</ul>' +'<ul style="width:40%; float:left;">' +'<li ng-repeat="project in list">{{project}}</li>' +'</ul>' }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular JS Testing</title> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="app" ng-controller="CustomDirectiveController"> <div directive-one></div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.