AngularJS学习之模型

1.ng-model指令:可以将输入域的值与AngularJS创建的变量绑定,用于绑定应用程序数据到HTML控制器(input,select,textarea)的值;

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

  名字:<input ng-model="name">

</div>

<script>

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

app.controller('myCtrl',function($scope){

  $scope.name="John Doe";

});

</script>

AngularJS学习之模型

2.双向绑定:在修改输入域的值时,AngularJS属性的值也将改变;

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

  名字:<input ng-model="name">

  <h1>你输入了:{{name}}</h1>

</div>

AngularJS学习之模型

3.验证用户输入:

<form ng-app="" name="myForm">

  Email:

  <input type="email" name="myAddress" ng-model="text">

  <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

</form>

AngularJS学习之模型

4.应用状态:ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error):

Valid: true (如果输入的值是合法的则为 true)。

Dirty: false (如果值改变则为 true)。

Touched: false (如果通过触屏点击则为 true)。

例子:

<form ng-app="" name="myForm">

  Email:

  <input type="email" name="myAddress" ng-model="myText" required></p>

  <h1>状态</h1>

  <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
  <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
  <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

AngularJS学习之模型

5.CSS类:ng-model指令基于它们的状态为HTML元素提供了CSS类:

<style>

input.ng-invalid{

  background-color:lightblue;

};

</style>

<body>

<form ng-app="" name="myForm">

  输入你的名字:

  <input name="myaddress" ng-model="text" required>

</form>

</body>

AngularJS学习之模型

上一篇:css3 linear-gradient实现页面加载进度条效果


下一篇:jquery.validate.js插件使用