javascript - Things in controller doesn't appear using AngularJS -
i trying show silder using ng-repeat. picture , other things in controller don't appear. here js code
angular.module('starter', []) .controller('slider', function($scope) { $(document).ready(function(){ $('.slider').slider({full_width: true}); }); $scope.pictures=[ { img:"http://www.brics-info.org/wp-content/uploads/2015/08/transmission-lines.jpg, info:"Эрчим хүчний барилга угсралт", desc:"Засвар, тестчилэл" }, { img:"http://www.burns-group.com/images/uploads/projects/amtrak-zoo-transmission-line-3.jpg", info:"Эрчим хүчний барилга угсралт", desc:"Засвар, тестчилэл" }, { img:"http://www.sgceng.com/snp_lib/showpic.php?recordid=630×tamp=1204139644&table=sgcengco", info:"Эрчим хүчний барилга угсралт", desc:"Засвар, тестчилэл" } ] ; })this index.html <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!-- compiled , minified css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!-- compiled , minified javascript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> <div class="slider" ng-app="starter" ng-controller="slider"> <ul class="slides"> <li ng-repeat="picture in pictures"> <img ng-src="{{picture.img}}"> <!-- image --> <div class="caption center-align"> <h3 class="black-text">{{picture.info}}</h3> <h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5> </div> </li> </ul> </div><!--slider-->
you should include controller in index.html page. , use ng-app="modulename" , use ng-controller="yourcontroller". script.js controller file.
<!doctype html> <html data-ng-app='starter'> /* used module name ng-app name */ <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!-- compiled , minified javascript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> /* load controller file */ </head> <body ng-controller="slider"> /* use controller */ <h1>hello plunker!</h1> <div class="slider"> <ul class="slides">{{pictures}} <li ng-repeat="picture in pictures"> <img ng-src="{{picture.img}}"> <!-- image --> <div class="caption center-align"> <h3 class="black-text">{{picture.info}}</h3> <h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5> </div> </li> </ul> </div> </body> </html> 
Comments
Post a Comment