Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
480 views
in Technique[技术] by (71.8m points)

ionic 中使用 cordova camera 插件 上传重复图片 不显示

<div  class="feedback-row feedback-list-imgs" ng-repeat="item in image_result">
      <div class="feedback-list-img" ng-click="changePic(item)">
        <!--<img ng-if="item.length" src="{{item}}">-->
        <img ng-src="{{item}}" style="width:100%;height:100%;">
        <!--<div class="img" style="background: url({{item}});background-size: 100% 100%;"></div>-->
      </div>
      <div class="img-delete" ng-click="deletePic(item)"><span class="ion-close-circled"></span></div>
    </div>
    
    
    
    
    
    js 调用原生 
        var data = ['取照片'];
  $scope.curPictureIndex = -1;//当前图片索引
  SGPlugin.showSelectedView($.proxy(self.onSelectPictureSuccess, self), data);
  
  
  原生返回
  
    /**

图片选择成功,显示图片并存储
**/
$scope.onSelectPictureSuccess = function(imageData) {

var self = this;
var imageDataTmp;
if (self.SGPlugin.isAndroid()) {
  imageDataTmp = "data:image/jpeg;base64," + imageData;
} else {
  imageDataTmp = imageData;
}

// 存储、置换该图片
var imageResultArray = $scope.image_result;
imageResultArray = _.isEmpty(imageResultArray) ? new Array() : imageResultArray;
if(self.curPictureIndex != -1){
  imageResultArray[self.curPictureIndex] = imageDataTmp;
}
else {
  imageResultArray.push(imageDataTmp);
}

$scope.image_result = imageResultArray;
$scope.$apply();

}
不重复的照片显示没有问题 上传重复的照片 有数据 但是不显示 求原因 报错

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in image_result


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

问题原因是 image_result 数组中对象的数据类型是字符串,因为ng-repeat 不允许集合中存在两个相同 id 的对象,对于数字或者字符串等基本数据类型来说,它的 id 就是它自身的值。因此数组中是不允许存在两个相同的数字的。为了规避这个错误,需要定义自己的 track by表达式。

解决方案:

  • item in items track by item.id // 业务上自己生成唯一的id

  • item in items track by $index //或者直接拿循环的索引变量$index来用

另外需要注意的是,如果数组中是存放对象:

HTML 代码片段

<body ng-app="exeApp">
 <ul ng-controller="MainCtrl">
   <li ng-repeat="user in users">
     {{user.name}}
   </li>
 </ul>
</body>

JavaScript 代码

angular.module('exeApp', []).
    controller('MainCtrl', ['$scope', 
       function($scope) {
        $scope.users = [
          {name: 'fer'},
          {name: 'fer'}
        ]
}]);

运行结果:
图片描述

具体示例,请参考JSBin


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...