search

Home  >  Q&A  >  body text

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

<p  class="feedback-row feedback-list-imgs" ng-repeat="item in image_result">
      <p class="feedback-list-img" ng-click="changePic(item)">
        <!--<img ng-if="item.length" src="{{item}}">-->
        <img ng-src="{{item}}" style="width:100%;height:100%;">
        <!--<p class="img" style="background: url({{item}});background-size: 100% 100%;"></p>-->
      </p>
      <p class="img-delete" ng-click="deletePic(item)"><span class="ion-close-circled"></span></p>
    </p>
    
    
    
    
    
    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

ringa_leeringa_lee2771 days ago511

reply all(3)I'll reply

  • ringa_lee

    ringa_lee2017-04-18 09:57:37

    The reason for the problem is that the data type of the objects in the image_result array is string, because ng-repeat does not allow two objects with the same id to exist in the collection. For basic data types such as numbers or strings, its id is its own value. Therefore, two identical numbers are not allowed to exist in the array. In order to avoid this error, you need to define your own track by expression.

    Solution:

    • item in track items by item.id // Generate your own unique id for business purposes

    • item in track items by $index //Or directly use the index variable $index of the loop

    Another thing to note is that if objects are stored in the array:

    HTML code snippet

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

    JavaScript code

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

    Run results:

    For specific examples, please refer to JSBin

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-18 09:57:37

    <p class="feedback-row feedback-list-imgs" ng-repeat="item in image_result track by $index">

    Try changing this here. Angular’s ​​ng-repeat loop array will report an error if the array content is repeated

    reply
    0
  • 黄舟

    黄舟2017-04-18 09:57:37

    The reason for the error is in ng-repeat

    By default, each item must be unique during ng-repeat. Because you have duplicate data, such an error message will be reported

    The error message has already told you the solution. Use track by

    ng-repeat="item in items track by $index"

    reply
    0
  • Cancelreply