AngularJS 五过滤器及验证

AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式。

格式: AngularJS 五过滤器及验证

一些比较重要的过滤器：

AngularJS 五过滤器及验证

Number

Filter

AngularJS 五过滤器及验证

orderBy：

查询的条件就是根据下拉框来进行过滤的

AngularJS 五过滤器及验证

AngularJS模块：

AngularJS应用程序必须创建一个顶级应用程序模块。

创建应用程序模块

AngularJS 五过滤器及验证

创建控制器模块

AngularJS 五过滤器及验证

AngularJS形式：

AngularJS表单并提交数据。

<head ng-app="studentApp">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>First AngularJS Application</title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
</head>
<body ng-controller="studentController">
    <h1>学生信息：</h1>
    <form  ng-form="submitStudnetForm()">
        <label for="firstName">First Name:</label><br />
        <input type="text" id="firstName" ng-model="student.firstName" /><br />

        <label for="lastName">Last Name:</label><br />
        <input type="text" id="lastName" ng-model="student.lastName" /><br />

        <label for="dob">DoB</label><br />
        <input type="date" id="dob" ng-model="student.DoB" /> <br /><br />

        <label for="gender">Gender</label> <br />
        <select id="gender" ng-model="student.gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select><br /> <br />

        <span>Training Type:</span><br />
        <label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label><br />
        <label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label> <br /><br />

        <span>Subjects</span><br />
        <label><input type="checkbox" ng-model="student.maths" />Maths</label> <br />
        <label><input type="checkbox" ng-model="student.physics" />Physics</label> <br />
        <label><input type="checkbox" ng-model="student.chemistry" />Chemistry</label><br /><br />

        <input type="submit" value="Submit" />
        <input type="reset" ng-click="resetForm()" value="Reset" />
        <script>
            //1.创建模块
            var studentApp = angular.module('studentApp', []);
            //2.创建控制器
            studentApp.controller("studentController", function ($scope, $http, $log) {              
                //3. 附加originalStudent类  这个类
                $scope.originalStudent = {
                    firstName: 'James',
                    lastName: 'Bond',
                    DoB: new Date('01/31/1980'),
                    gender: 'male',
                    trainingType: 'online',
                    maths: false,
                    physics: true,
                    chemistry: true
                };

                //4.赋值给student
                $scope.student = angular.copy($scope.originalStudent);
                //5.当你点提交的时候触发这个事件
                $scope.submitStudnetForm = function () {
                    $http.post('TestHandel.ashx', { student: $scope.student }, {
                        headers: { 'Content-Type': 'application/x-wwww-form-urlencoded' },
                        transformrequest: function (obj) {
                            var str = [];
                            for (var s in obj) {
                                str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                            }
                            return str.join("&");
                        }
                    }).then(function () {
                    });
                }
                //6.重置
                $scope.resetForm = function () {
                    $scope.student = angular.copy($scope.OriginalStudent);
                };
            });
        </script>

    </form>
</body>

View Code