如何並排顯示兩個列表
[英]How to display two lists side by side
問題描述
我知道這是一個愚蠢的問題，但我無法弄清楚為什么我不能這樣做。 我一直在搜索Stack Overflow，但是答案只有在沒有AngularJS的情況下才有效。 我無法同時顯示兩個列表。 我正在使用ng-repeat來顯示列表，但它們都以一行結尾。 出於某種原因，它無需重復就可以正常工作。 此代碼段不起作用，因為我需要兩個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
您需要重復列表的元素（ li ）而不是列表本身（ ul ）。
我假定projectList應該只是列表，因為那是您在范圍上定義的。
在ng-repeat中，in之前的名稱應為單數。 這是您需要在li內部為每個項目使用的名稱。
另外，您無需將模板放在單獨的文件中，可以將其作為template參數直接內聯，而不是templateUrl 。 這意味着您可以使其在摘要中起作用。
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.