首页 > 代码库 > AngularJS Notes
AngularJS Notes
ng-app The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
ng-model The ng-model directive binds the value of the input field to the application variable name.
ng-bind The ng-bind directive binds application variable name to the innerHTML of a paragraph.
ng-init The ng-init directive initialize AngularJS application variables.
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS expressions binds data to HTML the same way as the ng-bind directive.
g-repeat The ng-repeat directive repeats an HTML element.
AngularJS filters can be used to transform data:
Filter Description
currency Format a number to a currency format.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.
AngularJS $http is a service for reading data from web servers.
$http.get(url) is the function to use for reading server data.
<script>function customersController($scope,$http) { $http.get("http://www.w3schools.com/website/Customers_JSON.php") .success(function(response) {$scope.names = response;});}</script>
<!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.w3schools.com/website/Customers_JSON.php") .success(function(response) {$scope.names = response;});}</script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></body></html>
<!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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></body></html>ng-click The ng-click directive defines an AngularJS click event.