stackoom
  简体   繁体   中英

AngularJS - ng-repeat not showing

 原文  2017-03-21 10:12:06  3   1    javascript/ html/ angularjs/ angularjs-ng-repeat

Question

Having some trouble displaying objects from an array into my page using ng-repeat.

I've used angular before for a similar task and have used the same kind of structure where I've loaded the controllers and ng-repeat elements in the HTML, but can't get the example below to work.

Can anyone see what might be stopping the content from showing?

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: '#'
        }

    ];

}]);

});

1 answers

solution1
 0  2017-03-21 10:24:17

Check the working code below 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question AngularJs - data not showing in ng-repeat AngularJS ng-repeat not showing values angularjs ng-repeat not showing my data in ng-model In AngularJS, the data is showing up only in ng-repeat AngularJS - ng-repeat Showing single records Multiple Times AngularJS ng-repeat with multiple lists showing distinct values Empty Message Is not showing in empty table in ng-repeat angularjs angularJs ng-repeat and showing errors above the table Angularjs styling on ng-repeat AngularJS ng-repeat overflow
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM