<!DOCTYPE html>

<html ng-app="app">

<head>

    <meta charset="utf-8">

    <title>angularjs练习</title>

</head>

<body ng-controller="ctrl">

    <div>

    </div>

    <script src="~/Scripts/angular.min.js"></script>

    <script>

        var app=angular.module('app', []);

        app.controller('ctrl', function ($scope) {

        });

    </script>

</body>

</html>

单选：

        <input type="radio" name="sex" ng-model="sex" value="男" />男

        <input type="radio" name="sex" ng-model="sex" value="女" />女

        {{sex}}

复选：

 <input type="checkbox" ng-model="data.open" ng-true-value="" ng-false-value=""/>开

 <input type="checkbox" ng-model="data.close" ng-true-value="" ng-false-value="" />关
 $scope.data = {open:,close:};

下拉框：

        <select ng-model="user" ng-options="v.age as v.name for v in data"></select>

        {{user}}

              $scope.data = [

                { name: "张三", age:  },

                { name: "李四", age:  },

                { name: "王五", age:  },

              ]

              $scope.user = ;//设定下拉默认值

还可以这样：

　　　　　　　　<select ng-model="user">

                <option value="">请选择</option>

                <option ng-repeat="v in data" ng-value="{{v.age}}">{{v.name}}</option>

           　　</select>

       　　　　 {{user}}

如果网页加载速度慢，使用angularjs页面会看到很多”{{}}“，可以通过 ng-cloak 在加载时隐藏：

.......   
 <style>

        .ng-cloak {

            display: none;

        }

    </style>

</head>

<body ng-controller="ctrl" class="ng-cloak">
....
  • angular.lowercase：将字符串转换为小写
    angular.uppercase：将字符串转换为大写
    angular.forEach(obj, iterator, [context])：遍历对象集合，该函数包括三个参数，第一个参数表示需要遍历的对象或数组，第二个参数为一个函数，第三个对象为当前的上下文环境（this）；

    var values = {name: 'misko', gender: 'male'};
    
var log = [];
    
angular.forEach(values, function(value, key) {
    
  this.push(key + ': ' + value);
    
}, log);
    
expect(log).toEqual(['name: misko', 'gender: male']);
    angularisUndefinedvalue
  • .();判断value是否为一个对象，不包括null
    angularisStringvalue
  • .();判断value是否为Number类型
    angularisDatevalue
  • .();判断value是否为数组
    angularisFunctionvalue
  • .();判断value是否为一个DOM元素，包括JQuery封装的DOM
    angular.equals(o1, o2);判断两个对象是否相等

满足下列条件之一的，都视为两个对象相等。

  • o1===o2 返回true
  • o1和o2的所有属性通过angular.equals比较都相等
  • o1,o2都是NAN
  • 两个同样的正则（/abc/=/abc/）     在JavaScript中返回false，在angular中返回true

13..(,);将对象转换为json，obj：需要转换的对象，pretty：true或一个数字，true表示保留对象属性值中的空格和换行，设置为一个数字表示去掉空格和换行。默认值为2，即去除空格和换行。

angularfromJsonjson);将一个json字符串，转换为一个对象或对象数组。
15..();将一个原生DOM或HTML字符串包裹为一个JQuery对象。
支持以下函数：
    • addClass()
    • after()
    • append()
    • attr() -
      Does not support functions as parameters
    • bind() -
      Does not support namespaces, selectors or eventData
    • children() -
      Does not support selectors
    • clone()
    • contents()
    • css() -
      Only retrieves inline-styles, does not call getComputedStyle()
    • data()
    • detach()
    • empty()
    • eq()
    • find() -
      Limited to lookups by tag name
    • hasClass()
    • html()
    • next() -
      Does not support selectors
    • on() -
      Does not support namespaces, selectors or eventData
    • off() -
      Does not support namespaces or selectors
    • one() -
      Does not support namespaces or selectors
    • parent() -
      Does not support selectors
    • prepend()
    • prop()
    • ready()
    • remove()
    • removeAttr()
    • removeClass()
    • removeData()
    • replaceWith()
    • text()
    • toggleClass()
    • triggerHandler() -
      Passes a dummy event object to handlers.
    • unbind() -
      Does not support namespaces
    • val()
    • wrap()

提交表单：

        <input ng-model="data.username" />

        <input ng-model="data.age" />

        <button ng-click="add()">添加</button>
    <script>

        angular.module('app', [])

          .controller('ctrl', function ($scope, $http) {

              $scope.add = function () {

                  $http.post("/home/data", angular.toJson($scope.data)).then(function (res) {

                      alert(res.data);

                  });

              }

          });

    </script>

.net 接受前台请求：

        public ActionResult data(string username,string age)

        {

            return Content(username + ":" + age);

        }

使用angular.toJson把对象转成Json字符串后向后台提交，如果表单内容很多，可以像上面使用data对象使代码量减少很多,如果添加更多属性，可以使用angular.extend:

 　　　　　　$scope.add = function () {

                  angular.extend($scope.data, { id:  });

                  alert($scope.data)

                  var obj = angular.toJson($scope.data);

                  $http.post("/home/data", obj).then(function (res) {

                      alert(res.data);

                  });

              }

样式：

 　　　　<li ng-repeat="(k,v) in list" style="{{$even?'color:red':''}}">

                {{k.name}}

            </li>
      <table>

          <tr ng-repeat="v in  list">

              <td ng-class="{red:v.age>20}">{{v.name}}</td>

              <td>{{v.age}}</td>

              <td></td>

          </tr>

      </table>

如果angularjs数组有重复项，则显示数组时不显示，可以使用track by $index:

              $scope.arr = ['a', 'b', 'c', 'a'];

　　　　<li ng-repeat="v in arr track by $index">

                {{v}}

            　</li>

全选和反选：

 <ul>

            <li><input type="checkbox" ng-model="all" /></li>

            <li ng-repeat="v in [1,2]">

                <input type="checkbox" ng-checked="all" />

            </li>

        </ul>

过滤器：

        <span>{{"abcdefg"|uppercase}}</span>

        <div>{{4324.2432|number:}}</div>

        <div>{{"abcdefg"|limitTo::}}</div>

        <div>{{d|date:'yyyy-MM-dd HH:dd:ss'}}</div>

        <div>{{arr|orderBy:false}}</div>

        <div>{{list|orderBy:'name':false}}</div>

        <div>{{list|filter:''}}</div>
        angular.module('app', [])

          .controller('ctrl', function ($scope, $http) {

              $scope.arr = [, , , , , ];

              $scope.list=[{name:"张三",age:},{name:"张3三",age:},{name:"张2三",age:},{name:"张1三",age:}]

              $scope.d = new Date().getTime();

          });

排序：

    <div>

        <div>{{list}}</div>

        <button ng-click=orderby()">按年龄排序</button>

    </div>

<script>

        angular.module('app', [])

          .controller('ctrl', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {

              $scope.list=[{name:"张三",age:},{name:"李四",age:},{name:"王五",age:},{name:"赵六",age:}]

              $scope.orderby = function () {

                  if (arguments.callee["age"] == undefined) {

                      arguments.callee["age"] = false;

                  }

                  arguments.callee["age"] = !arguments.callee["age"];

                  $scope.list = $filter('orderBy')($scope.list, 'age', arguments.callee["age"]);

              }

          }]);

</script>

arguments.callee是保存点击状态的，有点像静态变量，每次点击其保存的变化值  ，点击改变排序，显示将会从小到大或从大到小来回切换排序，此方法可以应用到表格显示数据中，如下：

    <table>

        <tr>

            <th ng-click="orderby('name')">姓名</th>

            <th ng-click="orderby('age')">年龄</th>

        </tr>

        <tr ng-repeat="item in list">

            <td>{{item.name}}</td>

            <td>{{item.age}}</td>

        </tr>

    </table>

    <script src="~/Scripts/angular.min.js"></script>

    <script src="~/Scripts/underscore.js"></script>

    <script>

        angular.module('app', [])

          .controller('ctrl', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {

              $scope.list = [{ name: "张三", age:  }, { name: "李四", age:  }, { name: "王五", age:  }, { name: "赵六", age:  }]

              $scope.orderby = function (field) {

                  if (arguments.callee[field] == undefined) {

                      arguments.callee[field] = false;

                  }

                  arguments.callee[field] = !arguments.callee[field];

                  $scope.list = $filter('orderBy')($scope.list, field, arguments.callee[field]);

              }

          }]);

    </script>

还可以如下方式：

  angular.module('app', [])

          .controller('ctrl', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {

              $scope.list = [{ name: "张三", age:  }, { name: "李四", age:  }, { name: "王五", age:  }, { name: "赵六", age:  }]

              $scope.status = { name: false, age: false };

              $scope.orderby = function (field) {

                  $scope.status[field] = !$scope.status[field];

                  $scope.list = $filter('orderBy')($scope.list, field, $scope.status[field]);

              }

          }]);

搜索：

  html:

  <div>

        <input ng-model="key" />

        <table>

            <tr ng-repeat="item in list|filter:key">

                <td>{{item.name}}</td>

                <td>{{item.age}}</td>

                <td></td>

            </tr>

        </table>

    </div>

 
js:

    angular.module("app", []).controller("ctrl", function ($scope) {

            $scope.age = ;

            $scope.name = "wzh";

            $scope.list = [

                {name:"wzh",age:},

                {name:"zh",age:},

                {name:"wz",age:},

                {name:"qq",age:},

                {name:"zza",age:}

            ]

        })

$watch:监听变量变化

 <input ng-model="title" />{{error}}

     $scope.$watch("title", function (n, o) {

                  $scope.error = n.length >  ? "不能超过3" : "";

              });

监听对象

 <input ng-model="data.title" />{{error}}

              $scope.$watch("data", function (n, o) {

                  $scope.error = n.title.length >  ? "不能超过3" : "";

              },true);

自定义过滤器：把手机号码后几位用*代替

 <div>{{“”|truncate:}}</div>

 app.filter("truncate", function () {

             return function (v, len) {

                 len=len?len:;

                 return v.substr(,-len) + new String("*").repeat(len);

             }

         })

指令，

app.directive("hello", function () {

            return {

                template: "<div>{{name}}<input ng-model=name>",

                scope: {}

            }

        })

指令中的scope很重要，

scope参数是可选的，默认值为false，可选true、对象{}；

  • false：共享父域

  • true：继承父域，且新建独立作用域

  • 对象{}：不继承父域，且新建独立作用域

绑定策略（@、=、&）

app.directive("test",function(){

    return {

        restrict : "E",

        template : '<div name="{{name}}"></div>',

        replace : true,

        scope : {

            name : "@"

        }

}
<div ng-controller="mytest">

    父：<input type="text" ng-model="data.name" />

    <test></test>

</div>
app.directive("test",function(){

    return {

        restrict : "E",

        template : '<div data="data">子指令:<input ng-model="data.name" /></div>',

        replace : true,

        scope : {

            data : "="

        }

}

“=”有双重绑定的功能,比如mytest控制器与test子指令进行双重绑定

<div ng-controller="mytest">

    <test></test>

</div>

app.controller("mytest", function ($scope) {

    $scope.getName = function(){

        console.log("jack");

    }

});

app.directive("test",function(){

    return {

        restrict : "E",

        template : '<div get-name="getName()">子指令:<a href="javascript:void(0)" ng-click="getName()">点击调用父方法</a></div>',

        replace : true,

        scope : {

            getName : "&"

        },

        controller : function($scope){

            $scope.getName();  //"jack"

        },

        link : function ($scope) {

            $scope.getName(); //"jack"

        }

    }

});

“&”的意思是子指令能调用父控制器的方法,这里的指令template元素点击调用控制器的getName方法

指令中的控制器

var app = angular.module("app", []);

    app.directive("rere", [function () {

        return {

            retrict:"AE",

            templateUrl: '../html/1.html',

            controller: function ($scope) {

                $scope.list = [{ name: "张三", id:  }, { name: "张三", id: } ]

            }

        }

    }]);

1.html文件中：

<table>

    <tr ng-repeat="item in list">

        <td>{{item.id}}</td>

        <td>{{item.name}}</td>

    </tr>

</table>

ng-transclude

html:

 <div><h1 test age="">我是原来内容</h1></div>

js:

      app.directive("test", function () {

            return {

                template: "<div ><span ng-transclude ></span> {{age}} </div>",

                transclude:true,

                scope:{age:"="}

            }

        });

指令中Link使用：

    <div>

        <hello smallstr="wzh" bgcolor="green" fontcolor="#fff">今天我最大</hello>

        <hello smallstr="zl" bgcolor="blue" fontcolor="#aaa">最好是今天</hello>

        <hello smallstr="qing" bgcolor="red" fontcolor="#fff">星期一</hello>

        <hello smallstr="xingni" bgcolor="yellow" fontcolor="#000">大家都回家</hello>

    </div>
 app.directive("hello", function () {

            return {

                link:function(scope,elem,attr){

                    elem.css({ color: attr['fontcolor'] ,background:attr['bgcolor']}).html(elem.text()+"<small>"+attr["smallstr"]+"</small>");

                }

            }

        })

可以简写成：

 app.directive("hello", function () {

            return function (scope, elem, attr) {

                elem.css({ color: attr['fontcolor'], background: attr['bgcolor'] }).html(elem.text() + "<small>" + attr["smallstr"] + "</small>");

            }

        });

做一个大一点的练习---tab标签，整个TAB标签就是用指令写成。

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="~/Scripts/angular.min.js"></script>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <style>

        body {

        }

    </style>

</head>

<body ng-app="app" ng-controller="ctrl">

    <wzhtab></wzhtab>

    <script>

        var app = angular.module("app", []);

        app.controller("ctrl", function ($scope) {

        });

        app.directive("wzhtab", function () {

            return {

                templateUrl: "http/wzhtab.html",

                link: function (scope, elem, attr) {

                    $(elem).on("click", "a", function () {

                        $("a").removeClass("active");

                        $(this).addClass("active");

                        var index = $(this).index();

                        $(elem).find(".lists").hide().eq(index).show();

                    });

                },

                controller: function ($scope) {

                    $scope.list = [

                        {

                            title: "培训", data: [

                                { title: "asp.net", id:  },

                                { title: "PHP", id:  }

                            ]

                        },

                        {

                            title: "学习", data: [

                                { title: "asp.net", id:  },

                                { title: "PHP", id:  }

                            ]

                        },

                    ]

                }

            }

        });

    </script>

</body>

</html>

wzhtab.html

<style>

    a {

        border: 1px solid #;

        padding: 5px 10px;

        margin: ;

    }

        a.active {

            background: #;

            color: #fff;

        }

    .lists {

        border: 1px solid #;

        width: 300px;

        height: 100px;

        padding: 20px;

        margin-top: 5px;

    }

</style>

<div>

    <a ng-repeat="item in list" href="#" ng-class="{active:$first}">{{item.title}}</a>

    <div class="lists" ng-repeat="item in list" ng-style="{display:$first?'block':'none'}">

        <ul>

            <li ng-repeat="v in item.data">{{v.id}}.{{v.title}}</li>

        </ul>

    </div>

</div>

在指令link中使用jquery ，可以$(elem)，由于模板中元素是后添加，在指令 link操作dom事件时，使用了on绑定函数

问题：能不能使用普通jquery改变angularjs中的变量，并且显示数据出自动发生改变呢？

比如如下：用 angularjs事件方法，可以在button上添加ng-click="change()" ，可以改变，如果不用这种方法，使用jquery方法，这时name属性值已经发生了变化，但不会更新到界面上。

 <div>

        {{name}}

    <button id="btn">改变</button>

    </div>

 var app = angular.module("app", []);

        app.controller("ctrl", function ($scope) {

            $scope.name = "aaa";

            //$scope.change = function () {

            //    $scope.name = "bbb";

            //}

            $("#btn").click(function () {

                $scope.name = "bbb";

            });

        });

如果想更新到界面上，可以使用$apply()

   　　　　$("#btn").click(function () {

                $scope.name = "bbb";

                $scope.$apply();

            });
 
 
 

angularjs 常用功能练习的更多相关文章

  1. AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)

    AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...

  2. WebStorm 常用功能的使用技巧分享

    WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...

  3. AVA正则表达式4种常用功能

    正则表达式在字符串处理上有着强大的功能,sun在jdk1.4加入了对它的支持 下面简单的说下它的4种常用功能: 查询: String str="abc efg ABC";  Str ...

  4. [转]WebPack 常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  5. FastReport.Net 常用功能总汇

    一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要的报表.系统在打印处理时,先按主报表打印,当碰到 ...

  6. 带你走近AngularJS - 基本功能介绍

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  7. python3 字符串与列表常用功能

    一.字符串常用功能 1. capitalize(),将字符串的首字母变成大写,其余全部置为小写:如果字符串中有多个单词,也只是将第一个单词的首字母置为大写:例: >>> name = ...

  8. matlab进阶：常用功能的实现，常用函数的说明

    常用功能的实现 获取当前脚本所在目录 current_script_dir = fileparts(mfilename('fullpath')); % 结尾不带'/' 常用函数的说明 bsxfun m ...

  9. WebPack常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

随机推荐

  1. 20155334 2016-2017-2 《Java程序设计》第一周学习总结

    20155334 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 第一章主要讲了Java的前世今生以及Java的三大平台(Java SE.Java EE.Ja ...

  2. [IOI2011]Race 点分治

    [IOI2011]Race LG传送门 点分治板子题. 直接点分治统计,统计的时候开个桶维护下就好了. 注(tiao)意(le)细(hen)节(jiu). #include<cstdio> ...

  3. python基础数据类型补充

    python_day_7 一. 今日主要内容: 1. 补充基础数据类型的相关知识点 str. join() 把列表变成字符串 列表不能再循环的时候删除. 因为索引会跟着改变 字典也不能直接循环删除.把 ...

  4. CSP201312-3:最大的矩形

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  5. Thymeleaf教程【转】

    作者:不做浮躁的人 转自:http://www.blogjava.net/bjwulin/archive/2013/02/07/395234.html PS:其他推荐教程地址 http://blog. ...

  6. Scrum立会报告+燃尽图（十一月二十六日总第三十四次）：上传β阶段展示视频

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2413 项目地址:https://git.coding.net/zhang ...

  7. Scrum立会报告+燃尽图（十月十四日总第五次）：前期宣传工作进行中

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2195 Scrum立会master:段晓睿 一.小组介绍 组长:付佳 组员 ...

  8. Nginx 使用札记

    nginx是什么? nginx是俄罗斯人 Igor Sysoev为俄罗斯访问量第二的Rambler.ru站点开发的一个十分轻量级的HTTP服务器.它是一个高性能的HTTP和反向代理服务器,同时也可以作 ...

  9. HDU 5195 DZY Loves Topological Sorting 拓扑排序

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5195 bc(中文):http://bestcoder.hdu.edu.cn/contests ...

  10. lintcode-457-经典二分查找问题

    457-经典二分查找问题 在一个排序数组中找一个数,返回该数出现的任意位置,如果不存在,返回-1 样例 给出数组 [1, 2, 2, 4, 5, 5]. 对于 target = 2, 返回 1 或者 ...