AngularJS学习之旅—AngularJS 模型(四)

1、AngularJS ng-model 指令

<div class="cnblogs_code">

    不是一个合法的邮箱地址

<div class="cnblogs_code">

    状态

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

<div class="cnblogs_code">

<span style="color: #0000ff"><<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">charset<span style="color: #0000ff">="utf-8"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">style<span style="color: #0000ff">><span style="background-color: #f5f5f5; color: #800000">

input.ng-invalid <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">

background-color<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> lightblue<span style="background-color: #f5f5f5; color: #000000">;

<span style="background-color: #f5f5f5; color: #000000">}

<span style="color: #0000ff"></<span style="color: #800000">style<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="js/angular.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">ng-app<span style="color: #0000ff">="myApp"<span style="color: #ff0000"> ng-controller<span style="color: #0000ff">="myCtrl"<span style="color: #0000ff">>

<span style="color: #008000"><span style="color: #000000">

名字:

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">ng-model<span style="color: #0000ff">="name"<span style="color: #0000ff">>

<span style="color: #008000"><span style="color: #000000">

名字:

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">ng-model<span style="color: #0000ff">="name"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">h1<span style="color: #0000ff">>你输入了: {{name}}<span style="color: #0000ff"></<span style="color: #800000">h1<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">form <span style="color: #ff0000">name<span style="color: #0000ff">="validForm"<span style="color: #ff0000"> ng-init<span style="color: #0000ff">="FormText = 'test@runoob.com'"<span style="color: #0000ff">><span style="color: #000000">

Email:

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="email"<span style="color: #ff0000"> name<span style="color: #0000ff">="myEmail"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="FormText"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">span <span style="color: #ff0000">ng-show<span style="color: #0000ff">="validForm.myEmail.$error.email"<span style="color: #0000ff">>不是一个合法的邮箱地址<span style="color: #0000ff"></<span style="color: #800000">span<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">form<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">form <span style="color: #ff0000">name<span style="color: #0000ff">="StateForm"<span style="color: #ff0000"> ng-init<span style="color: #0000ff">="myText = 'test@runoob.com'"<span style="color: #0000ff">><span style="color: #000000">

Email:

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="email"<span style="color: #ff0000"> name<span style="color: #0000ff">="myAddress"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="myText"<span style="color: #ff0000"> required<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>编辑邮箱地址，查看状态的改变。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">h1<span style="color: #0000ff">>状态<span style="color: #0000ff"></<span style="color: #800000">h1<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>Valid: {{StateForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>Dirty: {{StateForm.myAddress.$dirty}} (如果值改变则为 true)。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>Touched: {{StateForm.myAddress.$touched}} (如果通过触屏点击则为 true)。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">form<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">form <span style="color: #ff0000">name<span style="color: #0000ff">="myForm"<span style="color: #0000ff">><span style="color: #000000">

输入你的名字:

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">name<span style="color: #0000ff">="myAddress"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="text"<span style="color: #ff0000"> required<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">form<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>编辑文本域，不同状态背景颜色会发生变化。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> app <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> angular.module(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">myApp<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,[]);

app.controller(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">myCtrl<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> ($scope) {

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">绑定和双向绑定

<span style="background-color: #f5f5f5; color: #000000">        $scope.name <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">John Doe<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">验证用户输入

<span style="background-color: #f5f5f5; color: #000000">

});

<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!