如何并排显示两个列表

Question

我知道这是一个愚蠢的问题，但我不明白为什么我不能这样做。我一直在通过 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", "whosebug.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>

Answer 1

您需要重复列表的元素（lis）而不是列表本身（uls）。

我假设 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", "whosebug.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>

如何并排显示两个列表

How to display two lists side by side

html

html-lists

angularjs

angularjs-directive

angular-template