AngularJS-ng-repeat無法正常工作
[英]AngularJS - ng-repeat not working
問題描述
我正在嘗試使用angularJS在3行中重復div卡。但是，它似乎不起作用。 它沒有顯示卡，而是顯示了純HTML，其中{{}}中的object關鍵字顯示為純文本。 這是所有相關代碼。
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>
/src/app.js
angular.module('inLineClient', [])
.controller('lineController', function($scope) {
$scope.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
}
];
});
感謝您提供任何幫助，並在需要mroe信息時發表評論。 完整回購網址為https://github.com/khalid-talakshi/InLine
2 個解決方案
解決方案1
2 已采納 2018-03-20 02:07:13
您在controller中使用$scope ，在HTML中使用Controller as syntax 。
按照任一方法，為了使用$ 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>
演示
// Code goes here angular.module('inLineClient', []) .controller('lineController', function($scope) { $scope.message = "test"; $scope.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 } ]; });
<!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"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.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> <script src="script.js"></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"> <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> </div> </body> </html>
解決方案2
0 2018-03-20 08:45:31
當使用Controller AS語法時，要訪問控制器的屬性，必須將'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
}
];
});
AngularJS ng-repeat不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.