使用ng-repeat在将数组中的对象显示到页面时遇到一些问题。
我之前使用过角度来执行类似的任务，并使用了相同类型的结构，我在HTML中加载了控制器和ng-repeat元素，但是无法让下面的示例工作。
任何人都可以看到可能阻止内容显示的内容吗？
Codepen：http://codepen.io/anon/pen/BWYXMx。
HTML：
<body ng-app="portfolioApp" data-spy="scroll" data-target="#navbar">
<div id="logo">
<a href="index2.html"></a>
<img src="img/logo-basic-dark.png" alt="Logo">
</div>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="pull-right nav navbar-nav" id="socialNav">
<li class="socialIcon"><a href="#" target="_blank"><span class="fa fa-github fa-lg"></span></a></li>
<li class="socialIcon"><a href="#" target="_blank"><span class="fa fa-linkedin fa-lg"></span></a></li>
<li class="socialIcon"><a href="#" target="_blank"><span class="fa fa-file-pdf-o fa-lg"></span></a></li>
</ul>
<ul class="pull-right nav navbar-nav">
<li class="navLink"><a href="#home" alt="Home Button">Home</a></li>
<li class="navLink"><a href="#about" alt="About Button">About Me</a></li>
<li class="navLink"><a href="#skills" alt="Skills Button">My Skills</a></li>
<li class="navLink"><a href="#work" alt="Work Button">My Work</a></li>
<li class="navLink"><a href="#contact" alt="Contact Button">Contact Me</a></li>
</ul>
</div>
</nav>
</div>
<main data-simplebar>
<section id="home">
<div class="sectionContent">
<h1 id="intro">Home Intro</h1>
</div>
</section>
<section id="about">
<div class="sectionContent">
<div class="row">
<div class="col-sm-12 col-md-10">
<h1>About Me</h1>
<p>About Description</p>
</div>
<div class="col-sm-12 col-md-2">
</div>
</div>
</div>
</section>
<section id="skills">
</section>
<section id="work" ng-controller="projectsController">
<div class="sectionContent">
<div class="project col-sm-12 col-md-6 col-lg-3" ng-repeat="project in projects">
<div>
<h2>{{project.name}}</h2>
<h4>{{project.description}}</h4>
<a ng-href="#">View Project</a>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="sectionContent">
</div>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://use.fontawesome.com/7758cac280.js"></script>
<script src="https://unpkg.com/simplebar@2.1.0/dist/simplebar.js"></script>
<script src="js/app.js"></script>
<script src="js/navScroll.js"></script>
</body>
JS：
(function() {
var app = angular.module('portfolioApp', []);
app.controller('projectsController', ['$scope', function($scope) {
$scope.title = 'Projects';
$scope.projects = [
{
name: 'Name1',
description: 'Description1',
link: '#'
},
{
name: 'Name2',
description: 'Description2',
link: '#'
},
{
name: 'Name3',
description: 'Description3',
link: '#'
},
{
name: 'Name4',
description: 'Description4',
link: '#'
}
];
}]);
});
答案 0 :(得分：0)
检查下面的工作代码
var app = angular.module('portfolioApp', []);
app.controller('projectsController', ['$scope', function($scope) {
$scope.title = 'Projects';
$scope.projects = [
{
name: 'Name1',
description: 'Description1',
link: '#'
},
{
name: 'Name2',
description: 'Description2',
link: '#'
},
{
name: 'Name3',
description: 'Description3',
link: '#'
},
{
name: 'Name4',
description: 'Description4',
link: '#'
}
];
}]);
/* GENERAL TEXT STYLING */
::selection
{
background:#1C16F6;
color:#fff;
}
::-moz-selection
{
background:#1C16F6;
color:#fff;
}
::-webkit-selection
{
background:#1C16F6;
color:#fff;
}
a, p, input, textarea, h1, h2, h3, h4
{
color: #272930;
}
a, p, input, textarea
{
font-weight: 400;
font-family: 'Heebo', 'Open Sans', sans-serif;
}
h1, h2, h3, h4
{
font-family: 'Poppins', 'Montserrat', sans-serif;
}
a
{
transition: 0.2s ease;
-moz-transition: 0.2s ease;
-webkit-transition: 0.2s ease;
}
/* GENERAL LAYOUT */
html, body
{
padding: 0;
margin: 0;
background-color: #f3f3f3;
overflow-x: hidden;
}
main
{
position: relative;
overflow-y: auto;
min-height: 100vh;
}
#logo
{
position: fixed;
top: 30px;
left: 30px;
display: flex;
align-items: center;
z-index: 99;
}
#logo > img
{
height: 25px;
}
#logo > a
{
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
cursor: pointer;
}
/* NAV */
nav,
.navbar-default
{
width: 100%;
z-index: 90;
border: none;
background: transparent;
padding: 30px 30px 0 30px;
}
.nav > li > a,
.nav > li > a:focus
{
background: transparent;
color: #272930;
font-size: 13px;
}
#navbar .navbar-nav li > a
{
padding: 5px 10px;
margin: 0 10px;
}
#navbar .navbar-nav li > a:focus
{
color: #777;
}
#navbar .navbar-nav .active > a,
#navbar .navbar-nav .active > a:focus
{
color: #272930;
background: transparent;
}
#navbar .navbar-nav#socialNav li > a
{
margin: 0 10px;
}
#navbar .navbar-nav#socialNav li > a:first-of-type
{
padding-left: 0;
}
#navbar .navbar-nav#socialNav li > a:last-of-type
{
padding-right: 0;
}
/* SECTIONS */
section
{
min-height: 100vh;
width: 100%;
background: transparent;
z-index: 99;
}
section:nth-of-type(even)
{
background: #fdfdfd;
}
.sectionContent
{
height: 100%;
width: 100%;
padding: 100px 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* HOME SECTION */
#home h1#intro
{
font-size: 35px;
color: #272930;
width: 80%;
}
/* ABOUT SECTION */
#about
{
}
/* WORK SECTION */
#work
{
height: auto;
background-image: url('../img/work.png');
background-size: cover;
background-position: center center;
}
#work .sectionContent
{
height: auto;
padding: 0;
}
#work .project
{
height: 100vh;
padding: 0 30px;
background: #fff;
display: flex;
align-items: center;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}
#work .project > div
{
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
#work .project:first-of-type:hover
{
background: rgba(130, 160, 72, 0.9);
}
#work .project:nth-of-type(2):hover
{
background: rgba(193, 100, 144, 0.9);
}
#work .project:nth-of-type(3):hover
{
background: rgba(69, 156, 140, 0.9);
}
#work .project:nth-of-type(4):hover
{
background: rgba(241, 137, 76, 0.9);
}
#work .project h2
{
font-weight: 700;
margin: 0;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}
#work .project h4
{
margin-top: 20px;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}
#work .project:hover h2,
#work .project:hover h4
{
color: #fff;
}
#work .project a
{
margin-top: 30px;
border: 1.5px solid #777;
background: #fff;
padding: 10px 15px;
max-width: 150px;
text-align: center;
color: #777;
}
#work .project a:hover
{
text-decoration: none;
border: 1.5px solid #272930;
color: #272930;
}
/* CONTACT SECTION */
#contact
{
} <body ng-app="portfolioApp" data-spy="scroll" data-target="#navbar">
<div id="logo">
<a href="index2.html"></a>
<img src="img/logo-basic-dark.png" alt="Logo">
</div>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="pull-right nav navbar-nav" id="socialNav">
<li class="socialIcon"><a href="#" target="_blank"><span class="fa fa-github fa-lg"></span></a></li>
<li class="socialIcon"><a href="#" target="_blank"><span class="fa fa-linkedin fa-lg"></span></a></li>
<li class="socialIcon"><a href="#" target="_blank"><span class="fa fa-file-pdf-o fa-lg"></span></a></li>
</ul>
<ul class="pull-right nav navbar-nav">
<li class="navLink"><a href="#home" alt="Home Button">Home</a></li>
<li class="navLink"><a href="#about" alt="About Button">About Me</a></li>
<li class="navLink"><a href="#skills" alt="Skills Button">My Skills</a></li>
<li class="navLink"><a href="#work" alt="Work Button">My Work</a></li>
<li class="navLink"><a href="#contact" alt="Contact Button">Contact Me</a></li>
</ul>
</div>
</nav>
</div>
<main data-simplebar>
<section id="home">
<div class="sectionContent">
<h1 id="intro">Home Intro</h1>
</div>
</section>
<section id="about">
<div class="sectionContent">
<div class="row">
<div class="col-sm-12 col-md-10">
<h1>About Me</h1>
<p>About Description</p>
</div>
<div class="col-sm-12 col-md-2">
</div>
</div>
</div>
</section>
<section id="skills">
</section>
<section id="work" ng-controller="projectsController">
<div class="sectionContent">
<div class="project col-sm-12 col-md-6 col-lg-3" ng-repeat="project in projects">
<div>
<h2>{{project.name}}</h2>
<h4>{{project.description}}</h4>
<a ng-href="#">View Project</a>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="sectionContent">
</div>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://use.fontawesome.com/7758cac280.js"></script>
<script src="https://unpkg.com/simplebar@2.1.0/dist/simplebar.js"></script>
<script src="js/app.js"></script>
<script src="js/navScroll.js"></script>
</body>