数据的绑定：单项数据绑定和双向数据绑定
1、单项数据绑定（模型到视图）
<body ng-app="app">
<ul ng-controller="DemoController">
<li>{{name}}{{age}}</li>
<li ng-cloak>{{name}}{{age}}</li>
<li ng-bind="name"></li>
<li ng-bind-template="{{age}}{{name}}"></li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
// 单项数据绑定，$scope-->view
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
// $scope就是模型
$scope.name = "张三";
$scope.age = 10;
}])
</script>
</body>
运行结果：
运行结果.png
其中绑定数据有两种方式：“{{}}”双花括弧或者ng-bind两种方式，但是两者的区别在与使用“{{}}”会发生“闪烁”,原因很简单，页面在解析的时候是从上往下执行的，当执行到{{name}}是还没有加载angular js库，所以会发生“闪烁”，当然也有解决这种现象的方法就是在标签中加上ng-cloak指令可以避免“闪烁”；
同时绑定两个数据有两中方式(ng-bind-template)：
<li ng-cloak>{{name}}{{age}}</li>
<li ng-bind-template="{{age}}{{name}}"></li>
2、双向数据绑定，用于表单(视图向模型传递数据)
<body ng-app="app">
//视图
<div ng-controller="DemoController">
<input type="text" ng-model="msg">
<h2>小明说：{{msg}}</h2>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
// 单项数据绑定，$scope-->view
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
// $scope就是模型
$scope.show =function () {
alert($scope.msg);
}
}])
</script>
</body>
运行结果：
运行结果.png
通过为表单元素添加ng-module指令实现视图向模型数据的绑定。
通过ng-init可以初始化模型：
<div ng-controller="DemoController" >
<input type="text" ng-model="msg" ng-init="msg='你饭吃了嘛'">
<h2>小明说：{{msg}}</h2>
</div>
运行结果：
运行结果.png
这样在页面刚加载完就会默认填充一个数据；
当然除了这些，还有其他的，给按钮绑定单击，双击,鼠标移出事件等等：
<body ng-app="app">
<div ng-controller="DemoController" >
<!--<input type="text" ng-model="msg" ng-init="msg='你饭吃了嘛'">-->
<!--<h2>小明说：{{msg}}</h2>-->
<button ng-click = "fun1()";>点击我</button>
<button ng-dblclick = "fun2()";>点击我，我被双击了</button>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
// 单项数据绑定，$scope-->view
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
// $scope就是模型
$scope.fun1=function () {
alert("我被点击了");
}
$scope.fun2=function () {
alert("我被双击了");
}
}])
</script>
</body>
单击事件.png
3、循环遍历元素
<body >
<div class="box" ng-app="app">
<div ng-controller="Democontroller">
<ul>
<li ng-repeat="c in course">{{c.name}},{{c.age}}岁</li>
</ul>
</div>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('Democontroller',['$scope',function ($scope) {
$scope.course =[
{name:"刘德华",age:30},
{name:"薛之谦",age:28},
{name:"范冰冰",age:20}
]
}]);
</script>
</body>
运行结果：
运行结果.png
还可以通过ng-switch-when过滤：
<body >
<div ng-controller="DemoController">
<ul>
<li ng-repeat="item in items" ng-switch="item">
<span ng-switch-when="css">{{item}}</span>
</li>
</ul>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.items = ['html', 'css', 'js'];
}]);
</script>
</body>
运行结果.png
就是说，当items的值为css时才显示出来。
网友评论