【发布时间】：2017-03-21 20:16:41
【问题描述】：
在使用 ng-repeat 将数组中的对象显示到我的页面时遇到一些问题。
我之前使用过 angular 来完成类似的任务，并且使用了相同类型的结构，其中我在 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: '#'
}
];
}]);
});
【问题讨论】：
-
您没有执行 IFEE 功能...将
(function(){...});替换为(function(){...})(); -
另外，您正在多次加载脚本（角度、jquery、引导程序）
-
devqon - 直接通过 Codepen 本身加载后忘记从 HTML 代码中删除它们，没有任何效果
-
Aby 反馈或建议 nick？
标签： javascript html angularjs angularjs-ng-repeat