angularjs ng-model双向数据绑定怎么在展示页面的时候不显示
1个回答
展开全部
贴出代码看看
以下是参照DEMO:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!--ng-model指令可以将输入域的值与AngularJS创建的变量绑定-->
<div data-ng-app="myApp" data-ng-controller="Ctrl">
名字：<input type="text" data-ng-model="name"/>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('Ctrl',function($scope){
$scope.name='John Doe';
})
</script>
<hr/>
<!--双向绑定-->
<div id="dblBind" data-ng-app="dblBind" data-ng-controller="dblCtrl">
名字：<input type="text" data-ng-model="name"/>
<h1>你输入了：{{name}}</h1>
</div>
<script>
var dblBind=angular.module('dblBind',[]);
dblBind.controller('dblCtrl',function($scope){
$scope.name='John Doe';
})
angular.bootstrap(document.getElementById('dblBind'),['dblBind']);
</script>
<hr/>
<!--验证用户输入-->
<form data-ng-app="myForm" name="myFormValid">
<!--注意ng-app的值与name值不能相同-->
Email:
<input type="email" name="myEmail" data-ng-model="text"/>
<span data-ng-show="myFormValid.myEmail.$error.email">不是一个合法的邮箱地址</span>
</form>
<script>
var myFormApp=angular.module('myFormApp',[]);
angular.bootstrap(document.getElementsByName('myFormValid'),['myFormApp']);
</script>
<hr/>
<!--应用状态-->
<!--ng-model可以为应用程序提供状态值(valid,dirty,touched,error)-->
<form data-ng-app="myForm2" name="appStatus" data-ng-init="myText='test@163.com'">
<p>Email:
<input type="email" data-ng-model="myText" name="myEmail" required />
</p>
<h1>状态</h1>
<!--$valid ng-valid Boolean 告诉我们这一项当前基于你设定的规则是否验证通过-->
<!--$invalid ng-invalid Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过-->
<!--$pristine ng-pristine Boolean 如果表单或者输入框没有使用则为True-->
<!--$dirty ng-dirty Boolean 如果表单或者输入框有使用到则为True-->
is valid:{{appStatus.myEmail.$valid}}<br/>
is dirty:{{appStatus.myEmail.$dirty}}<br/>
is change:{{appStatus.myEmail.$touched}}<br/>
is invalid:{{appStatus.myEmail.$invalid}}<br/>
is pristine:{{appStatus.myEmail.$pristine}}<br/>
is error:{{appStatus.myEmail.$error}}
</form>
<script>
var appStatus=angular.module('appStatus',[]);
angular.bootstrap(document.getElementsByName('appStatus'),['appStatus']);
</script>
<hr/>
<!--ng-model指令基于他们的状态为HTML元素提供了CSS类-->
<style>
input.ng-invalid{
background-color: lightblue;
}
</style>
<form data-ng-app="cssTestApp" name="cssTest">
输入你的名字：
<input type="text" name="myName" data-ng-model="text" required />
is valid:{{cssTest.myName.$valid}}<br/>
</form>
<script>
var cssTestApp=angular.module('cssTestApp',[]);
angular.bootstrap(document.getElementsByName('cssTest'),['cssTestApp']);
</script>
<!--ng-model指令可根据表单域的状态添加/移除以下类-->
<!--ng-empty,ng-not-empty,ng-touched,ng-untouched,ng-valid,ng-invalid,ng-dirty,ng-pending,ng-pristine-->
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
