AngularJS(三)

最新推荐文章于 2021-01-14 18:01:04 发布

Carl_Hugo

最新推荐文章于 2021-01-14 18:01:04 发布

阅读量228

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/zxiang248/article/details/52459436

版权

AngularJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

过滤器
使用语法

{{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>

Carl_Hugo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS(三)

过滤器使用语法{{expression|filterName:parameter1:parameter1:...parameterN}}书写自定义过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>mySelfFilter</title> <script src="http://
复制链接

扫一扫

专栏目录