美文网首页
AngularJS ns-repeat产生的$$hashke

AngularJS ns-repeat产生的$$hashke

作者: 崠崠 | 来源:发表于2018-11-25 17:42 被阅读0次

    问题产生

    编写列表界面,在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.listJSON.stringfy($scope.list) 进行打印。

    代码截图.png 打印结果.png

    这个具体啥原因,还没有发现,如果有哪位大佬清楚的话,请留言帮助小弟😊

    参考文献:

    Angular ng-repeat trackby and $$hashkey
    What is the $$hashKey added to my JSON.stringify result

    相关文章

      网友评论

          本文标题:AngularJS ns-repeat产生的$$hashke

          本文链接:https://www.haomeiwen.com/subject/rqipqqtx.html