首页 > 代码库 > AngularJs 模型

AngularJs 模型

2024-09-19 03:44:15   218人阅读

AngularJs ng-model 指令

ng-model 指令：

1.用于将输入域的值绑定到应用程序数据上;

2.用于绑定应用程序数据到HTML控制器.

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

    <div ng-app="myApp" ng-controller="myCtrl">
        <label for="">名字：<input ng-model="name"></label>
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.name = "Jonhn Doe";
        })
    </script>

双向数据绑定：

    <div ng-app="myApp" ng-controller="myCtrl">
        <label for="">名字：<input ng-model="name"></label>
        <h1>你输入了：{{name}}</h1>
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            
        })
    </script>

验证用户输入：

    <form action="" ng-app="myApp" ng-controller="myCtrl" name="myForm">
        <input type="email" name="myAddress" ng-model="text">
        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
    </form>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){

        })
    </script>

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

应用状态：

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

　　<form action="" ng-app="myApp" ng-controller="myCtrl" name="myForm">
        <input type="email" name="myAddress" ng-model="myText" required>
        <p>编辑邮箱地址，查看相应的状态</p>
        <p>
           valid: {{myForm.myAddress.$valid}}(如果输入值是合法的，则为true)
        </p>
        <p>
           dirty: {{myForm.myAddress.$dirty}}(如果值改变，则为true)
        </p>
        <p>
           touched: {{myForm.myAddress.$touched}}(如果通过触屏点击，则为true)
        </p>
    </form>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){

        })
    </script>

css类：

　　<style> 
        input.ng-invalid{
            background:skyblue;
        }
        input.ng-valid{
            background:greenyellow;
        }
　　</style>
　　<form action="" ng-app="" ng-name="myForm">
        输入你的名字：
        <input type="text" name="myName" ng-model="myText" required>
        <p>编辑文本域，不同状态背景颜色会发送变化。</p>
        <p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>
   </form>

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

ng-empty

ng-not-empty

ng-touched($touched 如果通过触屏点击，则为true)

ng-untouched

ng-valid($valid 如果没有错误/合法，值是true)

ng-invalid($invalid 如果有错误/不合法，值是true)

ng-dirty($drity 如果用户已经进行过交互，值是true)

ng-pending

ng-pristine($pristine 如果用户还没有进行过交互,值是true)

 

AngularJs 模型


联系
我们