zoukankan      html  css  js  c++  java
  • 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>
    var app2 = angular.module("myApp3", []);
    app2.controller("threeController", function ($scope) {
        $scope.name = "王五";
    });
  • 相关阅读:
    How to check a not defined variable in javascript
    How to scroll the window using JQuery $.scrollTo() function
    jQuery图片滑动
    分享一个提供各种尺寸图片的网站
    页面添加 mask 遮罩层
    input, textarea,监听输入事件
    Google jQuery URL
    在页面内, 滑块位置的控制
    jQuery autoResize
    jQuery banner 滑动
  • 原文地址:https://www.cnblogs.com/sumg/p/5605336.html
Copyright © 2011-2022 走看看