Question

我知道这是一个愚蠢的问题，但我无法弄清楚为什么我不能这样做。我一直在搜索Stack Overflow，但答案只能在没有AngularJS的情况下工作。我无法获得两个并排显示的列表。我使用ng-repeat来显示列表，但它们最终都排成一行。出于某种原因，它没有重复就完美无缺。这段代码片段无法正常工作，因为我需要两个html文件，但现在却是。

＆＃13;

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'
        };
    });

＆＃13;

<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>

＆＃13;

Answer 1

您需要重复列表中的元素（li s）而不是列表本身（ul s）。

我假设projectList应该只是列表，因为这是你在范围上定义的。

在ng-repeat中，in之前的名称应该是单数。这是您需要在li中为每个项目使用的名称。

此外，您不需要将模板放在单独的文件中，您可以将其作为template参数内联，而不是templateUrl。这意味着您可以使其在代码段中运行。

＆＃13;

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>'
         };
    });

＆＃13;

<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>

＆＃13;

如何并排显示两个列表

1 个答案: