AngularJS表单 AngularJS表单时输入控件的集合 HTML控件 一下HTML input 元素被称为HTML 控件： input 元素 select元素 button元素 textarea元素
HTML 表单 AngularjS表单上实例
代码语言：js复制 <div ng-app="myApp" ng-controller="formCtrl">
<from novalidate>
First Name:
<input type="text" ng-model="user.firstName">
Last Name:
<input type="text" ng-model="user.lastName">
<button ng-click="reset()">RESET</button>
</from>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<sctipt>
var app = angular.module('myApp'm[]);
app.controller('formCtrl',function($scope){
$scope.master = {firstName:"John",lastName:"Doe"};
$scope.reset = function(){
$scope.user = angular.copy($scope.master);
};
$scope.reset();
})
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
</sctipt>实例解析 ng-app 指令定义了AngularJS 应用。 ng-controller指令定义了应用控制器。 ng-model 指令绑定了两个inputh 元素到模型的user 对象。 formCtrl 函数设置了mater 对象的初始值，并定义了reset()方法。 reset() 方法设置了user 对象等于master对象。 ng-click 指令调用了reset()方法,且在点击按钮时调用。 novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。
AngularJS输入验证 AngularJS表单和控件可以验证输入的数据。
输入验证 AngularJS表单和控件可以提供验证功能，并对用户输入的非法数据惊醒警告。
应用代码
代码语言：js复制 <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名：</p>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
<p>
<input type="subimt" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.eail.$invalid">
</p>
</form>
<sctrpt>
var app = angular.module('myApp',[]);
app.controller('validateCtrl',function($scope){
$scope. user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
})
</script>实例解析 AngularJS ng-model 指令用于绑定输入元素到模型中。 模型对象有两个属性： user 和email 我们使用了ng-show指令，color:red 在邮件是$dirty 或$invalid才显示 属性： $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录
AngularJS API
AngularJS 全局API AngularJS 全局API 用于执行常见任务的JavaScript 函数集合， 比较对象 迭代对象 转换对象
全局 API 函数使用 angular 对象进行访问。 以下列出了一些通用的 API 函数： angular.lowercase() 转换字符床为小写 angular.uppercase() 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串，如果是返回true. angular.isNumber() 判断给定对象是否为数字，如果是返回true
angular.lowercase()
代码语言：js复制 <div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 = “JOHN”;
$scope.x2 =angular.lowercase($scope.x1)
});
</script>angular.uppercase()
代码语言：js复制 <div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 ="John";
$scope.x2 = angular.uppercase($scope.x1);
})
</script>angular.isString()
代码语言：js复制 <div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 = "JSON"；
$scope.x2 = angular.isString($scope.x1);
});
</script>angular.isNumber()
代码语言：js复制 <div ng-app="myApp" ng-controller="myCtrl">
<p>{{x1}}</p>
<p>{{x2}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.x1 = "JOHN"l
$scope.x2 = angular.isNumber($scope.x1);
});
</script>
