Angularjs 表单

1.概念:表单是输入控件的集合 注意:novalidate是H5中新增的属性,禁用浏览器的默认验证。

案例一:

<style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>


<div ng-app="Myapp" ng-controller="MyControll">
        <form novalidate>
            姓:<input type="text" ng-model="user.firstName" /><br />
            名:<input type="text" ng-model="user.lastName" /><br />
            <input type="button" value="重设" ng-click="reset()" />
            <br /><br />
            <table>
                <tr><th>姓</th><th>名</th></tr>
                <tr><td>{{user.firstName}}</td><td>{{user.lastName}}</td></tr>
            </table>
        </form>
    </div>
    <script>
        var app = angular.module("Myapp", []).controller("MyControll", function ($scope) {
            $scope.master = { firstName: "li", lastName: "cong" };
            $scope.reset = function () {
                $scope.user = angular.copy($scope.master);
            };
            $scope.reset();
        });
    </script>

效果图:

                              

 

通过一个简单的案例来应用一下将一个对象绑定到一个form表单里面,并可以将表单的值进行提交。

 

posted @ 2017-01-06 00:03  微笑代表淡定.Net  阅读(127)  评论(0)    收藏  举报