AngularJS 模型绑定

AngularJS

ng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

 

双向绑定

    <div ng-app="Myapp" ng-controller="MyController">
        姓名：<input ng-model="name" />
        你输入了名字：{{name}}
    </div>

    <script>
        var app = angular.module("Myapp", []);
        app.controller("MyController", function ($scope) {
            $scope.name = ["licong", "chengkai","taocheng"];
        });
    </script>

 

验证用户输入

提示信息会在 ng-show 属性返回 true 的情况下显示

    <form ng-app="" name="Parent">
        Email: <input type="email" name="MyEamil" ng-model="text" />
        <span ng-show="Parent.MyEamil.$error.email">不是合法的邮箱</span>
    </form>

 需要在form标签下使用

 

应用状态

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

  <form ng-app="" name="Parent">
        Email: <input type="email" name="MyEamil" ng-model="text" />
        <span ng-show="Parent.MyEamil.$error.email">不是合法的邮箱</span>
        <br/>
        状态：
        <p>Valid:{{Parent.MyEamil.$valid}}(如果输入的值是合法的则为true)</p>
        <p>Dirty:{{Parent.MyEamil.$dirty}}(如果值改变则为true)</p>
        <p>Touched:{{Parent.MyEamil.$touched}}(如果通过触屏点击则为 true)</p>
    </form>