AngularJSangularjs bind与model合营双向绑定 说明式方法输出

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<script src=”js/angurlar素材/angular/angular.js”></script>
</head>
<body>
<div ng-app=””>//指令的成效域
<p>名字:<input type=”text”; ng-model=”name”></p>
//绑定变量name
<h1 ng-bind=”name”><h1> 输出model绑定的数码
</div>
</body>
</html>

ng-app 指令告诉 AngularJS,<div> 成分是
AngularJS 应用程序 的”所有者”。

ng-model 指令把输入域的值绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到有些段落的 innerHTML。

 

angurlar中伊始化变量

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<script src=”js/angurlar素材/angular/angular.js”></script>
</head>
<body>
<div ng-app=”” ng-init=’firstName=”Jon”‘>//开始化应用程序变量

<h1 ng-bind=”firstName”><h1>//输出初阶化的变量
</div>
</body>
</html>

angular中央电台图与控制器的双向绑定

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>

</head>
<body>
<div ng-app=”myApp” ng-init=’firstName=”Jon”‘
ng-controller=”mycrl”>

<input type=”text” ng-model=”name” />//绑定name数据
<h2>年龄:{{age}}</h2>//输出控制器中的数据
</div>
</body>
</html>

angular 中的css样式

<style>
input.ng-invalid{
background: red;
}
</style>
<body>
<div ng-app=”myApp” ng-init=’firstName=”Jon”‘
ng-controller=”mycrl”>

<input type=”text” ng-model=”name” required/>
<h2>年龄:{{age}}</h2>
</div>
</body>
</html>

ng-model 指令依照表单域的图景添加/移除以下类:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • AngularJS,ng-dirty
  • ng-pending
  • ng-pristine

相关文章