Javascript AngularJS-ng重复不工作_Javascript_Angularjs

Javascript AngularJS-ng重复不工作

javascript angularjs

Javascript AngularJS-ng重复不工作,javascript,angularjs,Javascript,Angularjs,我尝试使用angularJS以3行的形式重复div卡。然而，它似乎不起作用。它不是在卡片的行中显示卡片，而是显示纯html，{{}中的对象关键字显示为纯html。以下是所有相关代码 Index.html <!DOCTYPE html> <html> <head ng-app="inLineClient"> <meta charset="utf-8"> <title>Client App | InLine</ti

我尝试使用angularJS以3行的形式重复div卡。然而，它似乎不起作用。它不是在卡片的行中显示卡片，而是显示纯html，{{}中的对象关键字显示为纯html。以下是所有相关代码

Index.html

<!DOCTYPE html>
<html>
  <head ng-app="inLineClient">
    <meta charset="utf-8">
    <title>Client App | InLine</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="/src/style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
    <script src="./src/app.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" href="#">InLine</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <span class="navbar-text">
          Welcome Back, User
        </span>
      </div>
    </nav>
    <div class="container">
      <div class="row">
        <h1 class="display-3">Current Conference: Conference</h1>
      </div>
      <div ng-controller="lineController as lineCtrl">
        <div class="row" ng-repeat="line in lineCtrl.linesList track by $index" ng-if="$index % 3 == 0">
            <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="lineCtrl.linesList[i] != null">
              <div class="card">
                <div class="card-header">
                  {{line.name}}
                </div>
                <div class="card-body">
                  <p class="card-text">{{line.description}}</p>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">Time: {{line.time}}</li>
                    <li class="list-group-item">Number of People: {{line.numPeople}}</li>
                    <li class="list-group-item"><a href="#" class="card-link">Card link</a></li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </body>
</html>

如果需要mroe信息，欢迎提供帮助和评论。完全回购在

您正在控制器中使用$scope
，并在HTML中使用控制器作为语法按照任意一种方法，为了使用$scope变量，将HTML更改为 <div ng-controller="lineController"> <div class="row" ng-repeat="line in linesList track by $index" ng-if="$index % 3 == 0"> <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="linesList[i] != null"> <div class="card"> <div class="card-header"> {{line.name}} </div> <div class="card-body"> <p class="card-text">{{line.description}}</p> <ul class="list-group list-group-flush"> <li class="list-group-item">Time: {{line.time}}</li> <li class="list-group-item">Number of People: {{line.numPeople}}</li> <li class="list-group-item"><a href="#" class="card-link">Card link</a></li> </ul> </div> </div> </div> </div> </div> 客户端应用程序|内联欢迎回来，用户本次会议：会议 {{line.name} {{line.description} 时间：{{line.Time} 人数：{{line.numPeople} 您正在控制器中使用$scope，并在HTML中使用控制器作为语法按照任意一种方法，为了使用$scope变量，将HTML更改为 <div ng-controller="lineController"> <div class="row" ng-repeat="line in linesList track by $index" ng-if="$index % 3 == 0"> <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="linesList[i] != null"> <div class="card"> <div class="card-header"> {{line.name}} </div> <div class="card-body"> <p class="card-text">{{line.description}}</p> <ul class="list-group list-group-flush"> <li class="list-group-item">Time: {{line.time}}</li> <li class="list-group-item">Number of People: {{line.numPeople}}</li> <li class="list-group-item"><a href="#" class="card-link">Card link</a></li> </ul> </div> </div> </div> </div> </div> 客户端应用程序|内联欢迎回来，用户本次会议：会议 {{line.name} {{line.description} 时间：{{line.Time} 人数：{{line.numPeople} 当使用Controller作为语法时，要访问Controller的属性，必须将'this'关键字分配给任何其他变量（在我的情况下，我已将其分配给vm），然后他/她可以通过该控制器作为变量访问属性 //index.html <!DOCTYPE html> <html> <head > <meta charset="utf-8"> <title>Client App | InLine</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="/src/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script> <script src="script.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body ng-app="inLineClient"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">InLine</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <span class="navbar-text"> Welcome Back, User </span> </div> </nav> <div class="container"> <div class="row"> <h1 class="display-3">Current Conference: Conference</h1> </div> <div ng-controller="lineController as lineCtrl"> {{lineCtrl.name}} <div class="row" ng-repeat="line in lineCtrl.linesList track by $index" ng-if="$index % 3 == 0"> <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="lineCtrl.linesList[i] != null"> <div class="card"> <div class="card-header"> {{line.name}} </div> <div class="card-body"> <p class="card-text">{{line.description}}</p> <ul class="list-group list-group-flush"> <li class="list-group-item">Time: {{line.time}}</li> <li class="list-group-item">Number of People: {{line.numPeople}}</li> <li class="list-group-item"><a href="#" class="card-link">Card link</a></li> </ul> </div> </div> </div> </div> </div> </div>`enter code here` </body> </html> //app.js angular.module('inLineClient', []) .controller('lineController', function($scope) { vm = this; vm.name = "arvind"; vm.linesList = [ { name: 'Lunch', description: 'Lunch time! Come down for some pizza, french fries and drinks!\nPrice: $10 for Pizza, Fries, and a Soft Drink', time: new Date('October 21, 2017 12:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null }, { name: 'VR Cave', description: 'Reserve your slot to play in our VR Cave', time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null }, { name: 'Breakfast', description: 'Good Morning! Bagels and Cream Cheese with Coffee, Tea and Hot Chocolate this morning!', time: new Date('October 22, 2017 8:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null }, { name: 'Intro to RESTful APIs by RBC', description: 'Learn about how to create REST APIs for your web application, brought to you by RBC', time: new Date('October 21, 2017 17:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null }, { name: 'Contest Programming', description: 'Get your programming on by competing among different hackers to win a prize!', time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null } ]; }); 客户端应用程序|内联欢迎回来，用户本次会议：会议 {{lineCtrl.name} {{line.name} {{line.description} 时间：{{line.Time} 人数：{{line.numPeople} `在这里输入代码` //app.js angular.module（'inLineClient'，[]） .controller（'lineController'，函数（$scope）{ vm=这个； vm.name=“arvind”； vm.linesList=[ { 姓名：'午餐'，描述：“午餐时间！下来吃点比萨饼、薯条和饮料！\n价格：比萨饼、薯条和软饮料10美元”，时间：新日期（'2017年10月21日12:30 EST-05:00'）。toLocaleTimeString（'en-US'）， numpople:null }, { 名称：“虚拟现实洞穴”，描述：'预留您的位置在我们的虚拟现实洞穴玩'，时间：新日期（'2017年10月22日美国东部时间0:30-05:00'）。toLocaleTimeString（'en-US'）， numpople:null }, { 名字：“早餐”，描述：“早上好！今天早上有百吉饼和奶油奶酪，还有咖啡、茶和热巧克力！”，时间：新日期（'2017年10月22日美国东部时间8:30-05:00'）。toLocaleTimeString（'en-US'）， numpople:null }, { 名称：“RBC对RESTful API的介绍”， description:“了解如何为您的web应用程序创建REST API，这是RBC带给您的”，时间：新日期（'2017年10月21日17:30 EST-05:00'）。toLocaleTimeString（'en-US'）， numpople:null }, { 名称：“竞赛编程”，描述：“让你的程序在不同的黑客之间竞争，赢得一个奖项！”，时间：新日期（'2017年10月22日美国东部时间0:30-05:00'）。toLocaleTimeString（'en-US'）， numpople:null } ]; }); 当使用控制器作为语法时，要访问控制器的属性，必须将“this”关键字分配给任何其他变量（在我的情况下，我已将其分配给vm），然后他/她可以通过该控制器作为变量访问属性 //index.html <!DOCTYPE html> <html> <head > <meta charset="utf-8"> <title>Client App | InLine</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="/src/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script> <script src="script.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body ng-app="inLineClient"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">InLine</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <span class="navbar-text"> Welcome Back, User </span> </div> </nav> <div class="container"> <div class="row"> <h1 class="display-3">Current Conference: Conference</h1> </div> <div ng-controller="lineController as lineCtrl"> {{lineCtrl.name}} <div class="row" ng-repeat="line in lineCtrl.linesList track by $index" ng-if="$index % 3 == 0"> <div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="lineCtrl.linesList[i] != null"> <div class="card"> <div class="card-header"> {{line.name}} </div> <div class="card-body"> <p class="card-text">{{line.description}}</p> <ul class="list-group list-group-flush"> <li class="list-group-item">Time: {{line.time}}</li> <li class="list-group-item">Number of People: {{line.numPeople}}</li> <li class="list-group-item"><a href="#" class="card-link">Card link</a></li> </ul> </div> </div> </div> </div> </div> </div>`enter code here` </body> </html> //app.js angular.module('inLineClient', []) .controller('lineController', function($scope) { vm = this; vm.name = "arvind"; vm.linesList = [ { name: 'Lunch', description: 'Lunch time! Come down for some pizza, french fries and drinks!\nPrice: $10 for Pizza, Fries, and a Soft Drink', time: new Date('October 21, 2017 12:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null }, { name: 'VR Cave', description: 'Reserve your slot to play in our VR Cave', time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null }, { name: 'Breakfast', description: 'Good Morning! Bagels and Cream Cheese with Coffee, Tea and Hot Chocolate this morning!', time: new Date('October 22, 2017 8:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null }, { name: 'Intro to RESTful APIs by RBC', description: 'Learn about how to create REST APIs for your web application, brought to you by RBC', time: new Date('October 21, 2017 17:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null }, { name: 'Contest Programming', description: 'Get your programming on by competing among different hackers to win a prize!', time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'), numPeople: null } ]; }); 客户端应用程序|内联欢迎回来，用户本次会议：会议 {{lineCtrl.name} {{line.name} {{line.description} 时间：{{line.Time}