您的位置：首页 > Web前端 > AngularJS

AngularJs笔记

2016-07-02 13:20 375 查看

数据绑定：循环
1 多个数组

<div ng-app="" ng-init="names=['张三','李四','王五'];ages=[29,21,45]">
<ul>
<li ng-repeat="name in names">
{{name}}`这里写代码片`
</li>
<li ng-repeat="age in ages">
{{age}}
</li>
</ul>
</div

数据初始化多个数组用“分号“分开

2 对象

<div ng-app="" ng-init=persons=[{name:'张三',age:29},{name:'李四',age:21},{name:"王五",age:45}]>
<ul>
<li ng-repeat="person in persons">
姓名:{{ person .name }}---------年龄:{{ person .age}}
</li>
</ul>
</div>

运行结果

姓名:张三——年龄:29
姓名:李四——年龄:21
姓名:王五——年龄:45

### ng-model 指令 ###
ng-model 指令可以将输入域与AngularJs 创建的变量绑定

1. 单向绑定

<div ng-app="myApp">
<div  ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<div ng-controller="myCtrl1">
名字1: <input ng-model="name1">
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
app.controller('myCtrl1', function($scope) {
$scope.name1 = "John Doe1";
});

</script>

$scope 不能更改; ng-controller 必须包含在ng-app ；
2. 双向绑定

<div ng-app="myApp" ng-controller="myCtrl">
卡号: <input ng-model="name">
<
4000
span class="hljs-tag"><h1>卡号是: {{name}}</h1>
</div>

3. 验证输入

<div ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</div>

应用状态

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required></p>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>

CSS类

<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航