AngularJs 模型

Posted 2020-09-16 老街_hehe

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs 模型相关的知识，希望对你有一定的参考价值。

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>