如何并排显示两个列表
[英]How to display two lists side by side
问题描述
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. 我一直在搜索Stack Overflow，但是答案只有在没有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. 我正在使用ng-repeat来显示列表，但它们都以一行结尾。 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. 此代码段不起作用，因为我需要两个html文件，但这里是。
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 个解决方案
解决方案1
1 已采纳 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). 您需要重复列表的元素（ li ）而不是列表本身（ ul ）。
I assume that projectList is supposed to be just list, as that is what you define on the scope. 我假定projectList应该只是列表，因为那是您在范围上定义的。
In the ng-repeat, the name before the in should be singular. 在ng-repeat中，in之前的名称应为单数。 That is the name that you need to use inside the li for each item. 这是您需要在li内部为每个项目使用的名称。
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 . 另外，您无需将模板放在单独的文件中，可以将其作为template参数直接内联，而不是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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.