zoukankan html css js c++ java

品优购 Angular学习

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo-1 差值表达式</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7 </head>
 8 <body ng-app>
 9     {{1+2}}
10     {{1 > 2}}
11 </body>
12 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo2 双向绑定</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7 </head>
 8 <body ng-app>
 9     <input ng-model="name"><br>
10     <input ng-model="name"><br>
11     {{name}}
12 </body>
13 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo3 初始化指令</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7 </head>
 8 <body ng-app  ng-init="name='黑马程序员'">
 9     <input ng-model="name">{{name}}
10 </body>
11 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo4 控制器和$scope 控制层通过$scope来控制数据</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope) {
12            //定义操作
13             $scope.add = function () {
14                 // return $scope.x + $scope.y;
15                 return parseInt($scope.x) + parseInt($scope.y);
16             }
17         });
18     </script>
19 </head>
20 <body ng-app="demoModule" ng-controller="demoController">
21     x:<input ng-model="x"><br>
22     y:<input ng-model="y"><br>
23     结果：{{add()}}
24 </body>
25 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo5 事件</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope) {
12             $scope.add = function () {
13                 // $scope.result = $scope.x + $scope.y;
14                 $scope.result = parseInt($scope.x) + parseInt($scope.y);
15             }
16         });
17     </script>
18 </head>
19 <body ng-app="demoModule" ng-controller="demoController">
20     x:<input ng-model="x"><br>
21     y:<input ng-model="y"><br>
22     <button ng-click="add()">运算</button>
23     结果：{{result}}
24 </body>
25 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo6 循环</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope) {
12             $scope.names = ["刘备", "孙权", "曹操"];
13         });
14     </script>
15 </head>
16 <body ng-app="demoModule" ng-controller="demoController">
17 <table>
18     <tr ng-repeat="name in names">
19         <td>{{$index}}</td>
20         <td>{{name}}</td>
21     </tr>
22 </table>
23 </body>
24 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo7 循环对象数组</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope) {
12             $scope.userList = [
13                 {"name": "刘备", "country": "蜀", age: 28},
14                 {"name": "曹操", "country": "魏", age: 30},
15                 {"name": "孙权", "country": "吴", age: 25}
16             ];
17         });
18     </script>
19 </head>
20 <body ng-app="demoModule" ng-controller="demoController">
21     <table>
22         <tr ng-repeat="user in userList">
23             <td>{{$index + 1}}</td>
24             <td>{{user.name}}</td>
25             <td>{{user.country}}</td>
26             <td>{{user.age}}</td>
27         </tr>
28     </table>
29 </body>
30 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo8 内置服务$http</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope, $http) {
12             $scope.findAll = function () {
13                 //获取用户列表
14                 $http.get("data.json").success(function (data) {
15                    $scope.userList = data;
16                 });
17             }
18         });
19     </script>
20 </head>
21 <body ng-app="demoModule" ng-controller="demoController" ng-init="findAll()">
22 <table>
23     <tr ng-repeat="user in userList">
24         <td>{{$index + 1}}</td>
25         <td>{{user.name}}</td>
26         <td>{{user.country}}</td>
27         <td>{{user.age}}</td>
28     </tr>
29 </table>
30 </body>
31 </html>

1 [
2   {"name": "刘备", "country": "蜀", "age": 28},
3   {"name": "曹操", "country": "魏", "age": 30},
4   {"name": "孙权", "country": "吴", "age": 25}
5 ]

查看全文

相关阅读:
JDK各版本新特性总结
 Java MyBatis3（3）分页插件PageHelper
Kubernetes--K8S
MySQL 查看表结构
 查看mysql库大小，表大小，索引大小
 Linux服务器安装Oracle服务端总结
 怎样玩转千万级别的数据
 Markdown 新手指南
 深入理解Java：注解（Annotation）基本概念
 深入理解Java：注解（Annotation）自定义注解入门

原文地址：https://www.cnblogs.com/mozq/p/11099285.html