AngularJs练习Demo2
Posted 编程猴子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs练习Demo2相关的知识，希望对你有一定的参考价值。
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>ng工具类</title> 11 <script src="~/Scripts/angular.js"></script> 12 <script type="text/javascript" src="~/Scripts/js/index2.js"></script> 13 </head> 14 <body> 15 <div ng-app="myApp"> 16 <div ng-controller="firstController"> 17 {{name}} 18 {{isArray}} 19 {{name1}} 20 {{eq}} 21 </div> 22 <div ng-controller="threeController"> 23 {{name}} 24 </div> 25 </div> 26 @*******动态初始化Model ↓**********@ 27 <div id="div1" ng-controller="firstController"> 28 {{name}} 29 </div> 30 <div id="div2" ng-controller="secondController"> 31 {{name}} 32 </div> 33 <script type="text/javascript"> 34 var app = angular.module("myApp", [‘myApp3‘]);//threeController定义在Index2.js文件中 35 app.controller("firstController", function ($scope) { 36 $scope.name = "zhangsan"; 37 $scope.arr = [1, 2, 3]; 38 $scope.a = ‘111‘; 39 $scope.b = ‘222‘; 40 $scope.a1 = { name: "张三" }; 41 $scope.b1 = { age: "10" }; 42 $scope.isArray = angular.isArray($scope.arr);//判断是否是数组 43 $scope.name1 = angular.uppercase($scope.name);//转成大写 44 $scope.eq = angular.equals($scope.a, $scope.b);//判断两个字符串是否相等 45 $scope.c1 = angular.extend($scope.b1, $scope.a1);//b1继承a1 46 console.log($scope.b1); 47 var json = { "name": "hello", "age": "20" }; 48 $scope.json = angular.toJson(json); //toJson 把json对象转换成字符串 49 $scope.json1 = angular.toJson(json, true);//第二个参数表示是否要格式化 50 var jsonStr = ‘ { "name": "hello", "age": "20" }‘; 51 $scope.jsonObj = angular.fromJson(jsonStr);//把字符串转化为对象 52 53 $scope.a2 = { name: "张三" }; 54 $scope.b2 = { age: "10" }; 55 $scope.c2 = angular.copy($scope.a2, $scope.b2); //把a2拷贝给b2，b2原有的值会被替换掉 56 57 var jsonObj = { "name": "hello", "age": "20" }; 58 angular.forEach(jsonObj, function (val, key) { 59 console.log(val); 60 }); 61 62 var result = []; 63 angular.forEach(jsonObj, function (val, key) { 64 this.push(val + key); 65 }, result); 66 67 68 //[bind]绑定对象作为函数的上下文 69 var self = { name: "张三" }; 70 var f = angular.bind(self, function (age) { 71 $scope.info = this.name + " is" + age; 72 console.log($scope.info); 73 }); 74 f(30); 75 76 //bind的另外一种写法 77 var f = angular.bind(self, function (age) { 78 $scope.info = this.name + " is" + age; 79 console.log($scope.info); 80 }, 30); 81 f(); 82 83 }); 84 //一个页面内不能定义两个ng-app的标签 ,bootstrap可以动态初始化model 85 var app1 = angular.module("myApp1", []); 86 var app2 = angular.module("myApp2", []); 87 app1.controller("firstController", function ($scope) { 88 $scope.name = "动态初始化model1"; 89 }); 90 app2.controller("secondController", function ($scope) { 91 $scope.name = "动态初始化model2"; 92 }); 93 var div1 = document.getElementById("div1"); 94 var div2 = document.getElementById("div2"); 95 document.onclick = function () { 96 angular.bootstrap(div1, [‘myApp1‘]); 97 angular.bootstrap(div2, [‘myApp2‘]); 98 } 99 </script> 100 </body> 101 </html>
以上是关于AngularJs练习Demo2的主要内容，如果未能解决你的问题，请参考以下文章
从 AngularJS url 中删除片段标识符（# 符号）