问题产生
编写列表界面,在HTML页面中使用ns-repeat
展示列表数据 $scope.list
,在列表加载完成之后,对列表进行新操作之后需要重新提交数据
JSON.stringify($scope.data)
得到的JSON字符串中多出了"$$hashKey":"object:5"
形式的数据
直接打印$scope.list 发现数组中的元素都比获取网络的时候多了一个属性$$hashKey
$$hashKey
$$hashKey
-- angular中 对使用 ns-repeat指令的数组自动创建的属性值,用来追踪数组元素任何变化以便及时更新DOM中元素。提及$$hashKey
,就必须说到 track by
。angularjs是数据双向绑定,使用ns-repeat
展示数组,当数组元素进行删除、修改、新增操作的时候,angularjs不会重新生成一个新的DOM结构,而是根据track by
指定的唯一特性来重新刷新该元素。当没有开发者没有使用track by
指定唯一特性,angular会自动为数组元素自动生成key为$$hashKey
,值为 object: 数字
形式的属性。
了解$$hashKey
的作用,就清楚如何避免向后台传了多余的$$hashkey
数据。
解决方案
1、使用track by
为每一个数组元素指定唯一特性,可以是元素中的属性,或者直接是index
ng-repeat="item in list track by $index"
2、去除$$hashKey
将对象转为json的时候,采用angular.toJson
或者angular.copy
替换直接使用JSON.stringify
。两者的作用都是去除angular为 元素自动产生的属性
JSON.stringify($scope.list);
//改为以下两种写法
angular.toJson($scope.list);
JSON.stringify(angular.copy($scope.list));
一般而言,使用ns-repeat
的列表数据,一旦对$scope.list
赋值就会产生$$hashKey
,但此时打印JSON.stringfy()不会出现$$hashKey
数据,只有在页面展示完全之后,在进行打印才会出现。
比如:我在网络加载的block中同时对 $scope.list
和 JSON.stringfy($scope.list)
进行打印。
这个具体啥原因,还没有发现,如果有哪位大佬清楚的话,请留言帮助小弟😊
参考文献:
Angular ng-repeat trackby and $$hashkey
What is the $$hashKey added to my JSON.stringify result
网友评论