AngularJS学习之表单

时间:2023-03-10 05:47:16
AngularJS学习之表单

1.HTML控件:以下HTML input元素被称为HTML控件:

**input元素

**select元素

**button元素

**textarea元素

2.AngularJS表单实例:

<div ng-app="myApp" ng-controller="formCtrl">

  <form novalidate>      //novalidate属性是在HTML5中新增的,禁用了使用浏览器的默认验证

First Name:<br>

  <input type="text" ng-model="user.firstName"></br>          //ng-model指令绑定了两个input元素到模型的user对象

  Last Name:<br>

  <input type="text" ng-model="user.lastName">

  <br><br>

  <button ng-click="reset()">RESET</button>

  </form>

  <p>form={{user}}</p>

  <P>master={{master}}</P>

</div>

<script>

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

app.controller('formCtrl',function($scope){                //formCtrl函数设置了master对象的初始值,并定义了reset()方法

  $scope.master={firstName:"John",lastName:"Doe"}

  $scope.reset=function(){                                     //reset()方法设置了user对象等于master对象

    $scope.user=angular.copy($scope.master)

  };

  $scope.reset();

});

</script>