<script>function customersController($scope,$http) { $http.get("http://www.Vevbs.com/website/Customers_JSON.php") .success(function(response) {$scope.names = response;});}</script>View Code<!DOCTYPE html><html><head><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f1f1f1;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><div ng-app="" ng-controller="customersController"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table></div><script>function customersController($scope,$http) { $http.get("http://www.Vevbs.com/website/Customers_JSON.php") .success(function(response) {$scope.names = response;});}</script><script src="//Ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></body></html>View Code<!DOCTYPE html><html><body><div ng-app="" ng-init="mySwitch=true"><p><button ng-disabled="mySwitch">Click Me!</button></p><p><input type="checkbox" ng-model="mySwitch"/>Button</p><p>{{ mySwitch }}</p></div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></body></html>View CodeLet's add a new controller method toPhoneDetailCtrl$scope.hello = function(name) { alert('Hello ' + (name || 'world') + '!');}View Codeand add:<button ng-click="hello('Elmo')">Hello</button>to thephone-detail.htmltemplate.Example of AngularJS controller and directives:
<section> <ul class="nav nav-pills"> <li ng-class="{ active:tab.isSet(1) }"> <a href ng-click="tab.setTab(1)">Description</a> </li> <li ng-class="{ active:tab.isSet(2) }"> <a href ng-click="tab.setTab(2)">Specs</a> </li> <li ng-class="{ active:tab.isSet(3) }"> <a href ng-click="tab.setTab(3)">Reviews</a> </li> </ul> <!-- Description Tab's Content --> <product-description ng-show="tab.isSet(1)" ></product-description> <!-- Spec Tab's Content --> <div product-specs ng-show="tab.isSet(2)"></div> <!-- Review Tab's Content --> <product-reviews ng-show="tab.isSet(3)"></product-reviews> </section>View Code(function(){ var app = angular.module('store-directives', []); app.directive("productDescription", function() { return { restrict: 'E', templateUrl: "product-description.html" }; }); app.directive("productReviews", function() { return { restrict: 'E', templateUrl: "product-reviews.html" }; }); app.directive("productSpecs", function() { return { restrict:"A", templateUrl: "product-specs.html" }; }); app.directive("productTabs", function() { return { restrict: "E", templateUrl: "product-tabs.html", controller: function() { this.tab = 1; this.isSet = function(checkTab) { return this.tab === checkTab; }; this.setTab = function(activeTab) { this.tab = activeTab; }; }, controllerAs: "tab" }; }); app.directive("productGallery", function() { return { restrict: "E", templateUrl: "product-gallery.html", controller: function() { this.current = 0; this.setCurrent = function(imageNumber){ this.current = imageNumber || 0; }; }, controllerAs: "gallery" }; }); })();View Code<!-- Product Reviews List --><ul> <h4>Reviews</h4> <li ng-repeat
新闻热点
疑难解答
