1
示すNGリピートを使って自分のページに配列からオブジェクトを表示するいくつかの問題を持っていません。AngularJS - ngのリピートは
私は、同様のタスクの前に、角使ってきたと私はコントローラとHTMLでのNGリピート要素をロードした構造の同じ種類を使用していたが、仕事に以下の例を得ることができません。
誰が示すのコンテンツを停止するかもしれないものを見ることができますか？
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/[email protected]/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: '#'
}
];
}]);
});
以下の作業コードを確認してください...置換する '（function（）{...}）; 'with '（function（）{...}）（）; ' – Gianpolo
はまた、あなたのスクリプトで複数回（角度、jqueryの、ブートストラップ）をロードしている – devqon
devqon - のみCodepen自体から直接ロードした後、HTMLコードからそれらを削除するのを忘れて、どんな効果 –