2016-04-17 10 views
0

Ich möchte Bild hochladen und auf der Seite erscheinen. Ich habe 5 Bilder, also gibt es 5 Arrays und ich benutze ng-repeat, um es zu zeigen.

Unten ist mein html in Jade Form:

   form.form-horizontal  
        .form-group(ng-repeat="runningText in runningTexts") 
         .col-md-3 
          label.control-label Image {{$index+1}} 
          .image-upload-area.label-centerleft 
           p(onclick="$('#imageFile').click()") Click me to change 
           img.loading(ng-show="isUploading" src="/img/loading.gif")  
           img.img-responsive.clickable(ng-src="{{runningText.image != '' ? '/img/' + runningText.image : '/img/logo_d.png'}}")          

       form#imageUpload(enctype="multipart/form-data" action="/api/admin/display/image" ng-upload="uploadDone(content)" method="post") 
        input#imageFile(type="file" name="image" onChange="$('#imageSubmit').click();return false;" style="display:none") 
        input#imageSubmit(type="submit" ng-click="isUploading = true" style="display:none") 

Unten ist mein Controller in meiner js-Datei:

loadData = function(){ //page load function 
    $http.get(apiPath) 
     .success(function(data){ 
      if (data != null){  
       $scope.runningTexts = data.displaySetting.runningText; 
      } 
     }) 
    } 

    $scope.uploadDone = function(data) { // upload finished function 
    $scope.runningTexts[0].image = data.path; // Problem here!! 
    $scope.isUploading = false; 
}; 

Wie gebe ich den Index, die ich in den HTML-Code auswählen und platzieren zurück in den $ scope.runningTexts [0] .image. Jetzt verwende ich 0, daher wird jedes hochgeladene Bild nur in Array 0 angezeigt. Wie mache ich es, wenn ich auf Array 1 oder 2 hochlade und so weiter?

+0

wie diese ng-click = "loaddata ($ index)" – Sajeetharan

+0

@Sajeetharan, mein Problem beim Upload Ziel ist, wie meine uploadDone Funktion wissen, welche Array ich hochgeladen? Ich lade das ganze Array auf einmal mit ng-repeat aus. Aber während des Uploads lade ich nur jeweils ein Array hoch. Das ist mein Problem. – Coolguy

Antwort

0

Sie müssen eine Funktion bei Klickereignis von Image aufrufen und $ index als Parameter übergeben.

<div ng-app="myApp" ng-controller="MainCtrl"> 
<ul> 
    <li ng-repeat="page in pages"> 
     <a ng-class="{ testClass: $index == pageNumber }" ng-click="setPageNumber($index)">{{ page }}</a> 
    </li> 
</ul> 

var app = angular.module('myApp', []); 

    app.controller('MainCtrl', function($scope) { 
    $scope.pages = [ 
    'Page One', 
    'Page Two', 
    'Page Three' 
]; 

$scope.pageNumber = 0; 
$scope.setPageNumber = function(index) { 
    $scope.pageNumber = index; 
    console.log(index) 
} 

});

Sie können diese Geige überprüfen.

http://jsfiddle.net/razh/NFNvc/

Verwandte Themen