Angular JS1学习笔记之一ng-model模型

Angular JS ng-model指令

ng-model用于绑定应用程序（input、select、textarea）的数据到html的controller里。
与ng-bind区别在于，input是用于用户输入的，数据要用ng-model从View传输到Controller中，而{{}}和ng-bind是用于从controller中得到数据然后显示在view中的。

ng-model指令

ng-model指令可以将输入的值与AngularJs创建的变量绑定。如下，通过angular.module将我们的应用程序（myApp）绑定到变量app上，同样，在angular的controller中，我们在input输入框中输入的值也与$scope变量绑定。

<div ng-app="myApp" ng-controller="">
    姓名:<input ng-model="name">
    <script>
        var app = angular.module("myApp",[]);
        app.controller('myCtrl',function($scope){
            $scope.name = "John"
        })
    </script>
</div>

双向绑定

基于上面的代码，我们在姓名上面加一行代码<h1>你输入了：{{}}</h1>获者<h1>你输入了:<span ng-bind="name"></span></h1>。都可实现修改input输入框内容，AngularJS属性的值也将修改，即数据的双向绑定。

用户在input框内输入，ng-model取得数据传输到controller，{{}}或ng-bind同时从controller里取得数据反映到view视图。

验证用户输入

对以下实例，提示信息（invalid email）会在ng-show属性返回true的情况下显示，初始默认状态下是隐藏的，多用于表单等。

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">invalid email</span>
</form>

应用状态

$valid Boolean 告诉我们这一项当前基于你设定的规则是否验证通过

$invalid Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过

$pristine Boolean 如果表单或者输入框没有使用则为True

$dirty Boolean 如果表单或者输入框有使用到则为True

$touched Boolean如果元素已经失去过焦点,那这个值就是false.

<form ng-app="" name="myForm2" ng-init="myText='hello sofia'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required>
    <h1>状态：</h1>
    验证规则是否通过：{{myForm2.myAddress.$valid}}<br/>
    表单是否用到：{{myForm2.myAddress.$dirty}}<br/>
    焦点：{{myForm2.myAddress.$touched}}
</form>

CSS 类

ng-model指令基于它们的状态为HTML元素提供了CSS类，如下，设置了required属性，表示输入框是必填否则为空是不合法的对于验证框我们设置了CSS样式，不同状态，背景颜色会发送变化：

<style>input.invalid{background-color:lightbue;}</style>
<form>
    输入你的名字：<input name="myName" ng-model="name" required type"text">
</form>

Tips

ng-model指令根据表单域的状态添加/移除以下类：

• ng-empty
• ng-not-empty
• ng-touched
• ng-untouched
• ng-valid
• ng-invalid
• ng-dirty
• ng-pending
• ng-pristine