AngularJS(三)

来源：互联网发布：java英文参考文献编辑：程序博客网时间：2024/06/05 06:56

过滤器
使用语法

{{expression|filterName:parameter1:parameter1:...parameterN}}

书写自定义过滤器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>mySelfFilter</title>    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>    <script>        var homeModule=angular.module('HomeModule',[]);        function homeController($scope){            $scope.pageHeading="to be a good man";        }        homeModule.filter('titleCase',function(){            var titleCaseFilter=function(input){                /*将一串字符串按照空格切分*/                var words=input.split(' ');                for(var i=0;i<words.length;i++){                    words[i]=words[i].charAt(0).toUpperCase()+words[i].slice(1);                }                return words.join(' ');            };            return titleCaseFilter;        });    </script></head><body ng-controller="homeController" ng-app="HomeModule">    <h1>{{pageHeading|titleCase}}</h1></body></html>

通过Route和$location改变视图

var someModule=angular.module('someModule',[..module dependencies..]);someModule.config(function($routeProvider){$routeProvider.when('url',{controller:aController,templateUrl:'/path/to/template'}).when(..othermappings for your app)...otherwise(..what to do id noting else mathches..);});

当浏览器url变为指定url时，Angular将加载/path/to/template下的模版，同时用aController管理这个模版的根元素。
最后一行为没匹配到就走到这一段。

与服务器交互 $http
……

用指令修改Dom

var appModule=angular.module('appModule',[...]);appModule.directive('directiveName',directiveFunction);

自定义标签实现标签自动聚焦

<!DOCTYPE html><html lang="en" ng-app="app"><head>    <meta charset="UTF-8">    <title>index</title>    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>    <script>        var appModule=angular.module('app',[]);        appModule.directive('ngbkFocus',function(){            /*将光标自动定位到标签*/            return{                link:function (scope,element,attrs,controller){                    /*属性的数组传递给了标识符 以及dom元素上的控制器*/                    element[0].focus();                }            };        });        function someController($scope){            $scope.message={                text:"nothing click here"            };            $scope.clickUnfocused=function(){                $scope.message.text="unfocused button clicked";            };            $scope.clickFocused=function(){                $scope.message.text="focus button clicked";            };        }    </script></head><body ng-controller="someController">    <button ngbk-focus ng-click="clickUnfocused()">Not Focused</button>    <button ng-click="clickFocused()">I am focused!</button>    <div>{{message.text}}</div></body></html>

表单校验

<form name="addUserForm" ng-controller="AddUserController">    <div>First name: <input ng-model="user.first" required></div>    <div>Last name: <input ng-model="user.last" required></div>    <div>Email: <input type="email" ng-model="user.email" required></div>    <div>Age: <input type="number" ng-maxlength="3" ng-minlength="1"></div>    <div><button>Submit</button></div></form>

使用来自HTML5的 required属性、email属性、number属性
在控制器内部 $valid 属性来访问表单的校验状态

个体提交按钮ng-disabled 阻止非法状态的提交

<button ng-disabled="!addUserForm.$valid">submit</button>

<!DOCTYPE html><html lang="en" ng-app><head>    <meta charset="UTF-8">    <title>form2</title>    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>    <script>        function AddUserController($scope){            $scope.message="";            $scope.addUser=function(){                $scope.message="Thanks "+$scope.user.firstName+", we add you";            };        }    </script></head><body><ng-form ng-controller="AddUserController" name="addUserForm">    <div ng-show="message">{{message}}</div>    <div>FirstName: <input name="firstName" ng-model="user.firstName" required></div>    <div>LastName: <input name="lastName" ng-model="user.lastName" required></div>    <div>Email: <input type="email" ng-model="user.email" required></div>    <div>Age: <input type="number" ng-maxlength="3" ng-minlength="1"></div>    <div><button ng-click="addUser()" ng-disabled="!addUserForm.$valid">Submit</button></div></ng-form></body></html>

0 0