angular数据绑定与监控(学习笔记)

最新推荐文章于 2023-08-30 12:20:11 发布

吴杼恩

最新推荐文章于 2023-08-30 12:20:11 发布

阅读量2.6k

点赞数 2

分类专栏： AngularJS知识点汇总文章标签： angular数据绑定与监控学习笔记

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/50635631

版权

本文详细介绍了Angular中的数据双向绑定，包括基于单一模型的界面同步、对模型的二次解析，以及数组和对象结构的绑定。通过ng-repeat指令处理数组数据，同时讲解了如何处理含有重复值的数组和多维数组。此外，文章还讨论了数据监控的深度监控方法，样式的数据绑定，状态控制如ng-show和ng-if，以及数据联动的实现。最后，总结了数据绑定在不同场景的应用及其核心——数据驱动视图。

摘要由CSDN通过智能技术生成

数据的双向绑定

angular实现了双向绑定机制,所谓双向绑定,就是从界面的操作能实时反映到数据,数据的变更能实时展现到界面.

基于单一模型的界面同步

ng-model 指令:

可以将输入域的值与 AngularJS 创建的变量绑定。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp" >
<span style="white-space:pre">	</span>名字: <input ng-model="name">
<br/>{
   {name}}</div>
<script>
var app = angular.module('myApp', []);
</script>


</body>
</html>

在angular中,变量和表达式都依附在一种叫做作用域(scope)的东西上.每个angular应用默认会有一个根作用域($rootScope),如果在界面中绑定未定义的变量,当它被赋值的时候,就会自动创建到对应的作用域上.

"{ {}}"这种符号,称为插值表达式,这里面的内容将会被动态解析.除了"{ {}}"angular还提供了ng-bind来实现一样的功能.

对模型的二次解析

有的时候,我们需要在界面上显示性别,男/女,但是在数据库里面存的是0或者1,那么我们就要对它进行一些转换.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div>{
  {formatGender(tom.gender)}}</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
		$scope.tom = {
    name: "Tom",
    gender: 1,
    genderText: "男"
};	
	$scope.formatGender = function(gender) {
    if (gender == 0){
        return "女";
	}
    if (gender == 1){
        return "男";
    }
};	
	
});
</script>

</body>
</html>

我们这里利用表达式使用函数的方法对数据进行格式化,其实只是作用于视图层,不会影响到真实数据模型.

注意:

1:在绑定表达式里面,只能使用自定义函数,不能使用原生函数.

<div>{
  {Math.abs(-1)}}</div>

以上是错误的例子,如果确实需要调用原生函数,可以用一个自定义函数作包装,在自定义函数里面可以随意使用各种原生对象.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div>{
  {abs(-1)}}</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.abs = function(number) {
    return Math.abs(number);    
};
});
</script>
</body>
</html>

2:上面这个格式化数据的例子只是为了说明可以这么用,但不表示这是最佳方案.angular为这类需求提供了filter方案,可以在"{ {}}"表达式中使用管道操作符来格式化数据.

{
  {expression | filterName : parameter1 : ...parameterN}}

数组与对象结构的绑定

有的时候,我们需要把一个数组的数据展示出来,这可以使用ng-repeat指令来处理,它相当于一个循环.

单一数组数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="add()">Add Item</button>
<ul>
    <li ng-repeat="item in arr1">{
  {item}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.arr1 = [1, 2, 3];

$scope.add = function() {
    $scope.arr1.push($scope.arr1.length + 1);
};
});
</script>

</body>
</html>

这样就可以把数组的内容展示到界面上.数组中的数据变化时,也能实时更新到界面上来.

但有时候,我们会遇到数组里有重复元素的情况,这时候,ng-repeat代码就不能起作用,原因是angular默认需要在数组中使用唯一索引,如果这遇到这情况,那就可以指定它使用序号作为索引即可.