2016-08-06 40 views
0

TLDR: Hier ist ein plnkr des Problems ist: https://plnkr.co/edit/HfRoCgPfdoZNxmTtDLf7?p=previewMit ng-repeat mit ng-Modell modifiziert falsches Objekt

Ich habe ein Formular mit Kontrollkästchen:

<div class="form-group"> 
    <div class="input-group"> 
    <div class="checkbox"> 
     <label> 
     <input type="checkbox" ng-model="rental.car2go.airport.berlin"> Berlin 
     </label> 
     <br/> 
     <label> 
     <input type="checkbox" ng-model="rental.car2go.airport.hamburg"> Hamburg 
     </label> 
     <br/> 
    </div> 
    </div> 
</div> 

, die den Mietgegenstand wird modifiziert. Dies ist, wie der Controller wie folgt aussieht:

angular.module('c2gyoApp', []).controller('c2gyoAppController', [ 
'$scope', 
'state', 
function($scope, state) { 
    $scope.airports = [{ 
    "name": "Berlin", 
    "model": "rental.car2go.airport.berlin" 
    }, { 
    "name": "Hamburg", 
    "model": "rental.car2go.airport.hamburg" 
    }, ]; 

    $scope.rental = state.rental; 

}]).factory('state', function() { 

var rental = { 
    car2go: { 
    airport: { 
     berlin: false, 
     hamburg: false 
    } 
    } 
}; 

return { 
    rental: rental 
}; 
}); 

Jetzt habe ich ng-repeat verwenden möchten:

<div class="form-group"> 
    <div class="input-group"> 
    <div class="checkbox"> 
     <span ng-repeat="airport in airports"> 
    <label> 
     <input type="checkbox" 
      ng-model="airport.model"> 
       {{airport.name}} 
     </label> 
     <br> 
     </span> 
    </div> 
    </div> 
</div> 

Mit ng-wiederholen die Form modifiziert die Flughäfen Objekt (airports[1].model=true/false und airports[2].model=true/false).

Es sollte nur die Zeichenfolge dieses Flughafenobjekts (rental.car2go.airport.berlin und rental.car2go.airport.hamburg) verwendet und das Mietobjekt geändert werden. Ich suche nach einer Möglichkeit, die Zeichenfolge an das ng-Modell zu übergeben, nicht an das Flughafenobjekt. Wie kann ich das machen?

Edit: entfernt die Richtlinie, neue plnkr

+0

Es ist nicht klar, warum Sie behaupten, dass es nicht richtig funktioniert. Der ** Wert ** eines Kontrollkästchens ist entweder 'wahr' oder 'falsch' und daher ist die Ersetzung wie Sie beobachten (in beiden Beispielen). – FDavidov

+0

Es funktioniert wahrscheinlich richtig, aber nicht wie ich es will;) Überprüfen Sie die Plunkr (https://plnkr.co/edit/HfRoCgPfdoZNxmTtDLf7?p=preview) Ich möchte ein anderes Objekt ändern (rental.car2go.airport.xxx) als derjenige, der an ng-repeat (Flughäfen) übergeben wird. – mles

+1

angular unterstützt diese Art des Bindens von 'ng-model' nicht. Ich habe ein wenig mit ein paar Optionen experimentiert, wie mit dem 'ng-modelOptions' Getter/Setter, konnte aber keine funktionierende Option finden. Sie werden wahrscheinlich etwas tun müssen, um das Kontrollkästchen an eine Eigenschaft von 'airport' zu binden, und dann den Wert in das' miet'-Array in einer 'ng-click'-Funktion zu kopieren. – Claies

Antwort

0

In der Tat, wie @Claies vorgeschlagen habe, musste ich den Wert in das Mietarray kopieren. Ich habe dafür eine ng-change Funktion verwendet. Neue ng-repeat:

<span ng-repeat="airport in airports"> 
    <label> 
    <input type="checkbox" 
      ng-model="airport.model" 
      ng-change="changeAirport(airport)"> 
    {{airport.name}} 
    </label> 
    <br> 
</span> 

In der Steuerung:

$scope.changeAirport = function(airport) { 
    var airportName = $filter('lowercase')(airport.name); 
    state.rental.car2go.airport[airportName] = airport.model; 
} 
0

Die JSON Sie ändern sich ist:

$scope.airports = [{ 
    "airport": "Berlin", 
    "model": "rental.car2go.airport.berlin" 
    }, { 
    "airport": "Hamburg", 
    "model": "rental.car2go.airport.hamburg" 
    }, ]; 

wo `Flughäfen [0] .model- = "rental.car2go.airport.berlin" , also die Zeichenfolge rental.car2go.airport.berlin. Diese Zeichenfolge wird durch TRUE oder FALSE ersetzt. Ich nehme an, dass Sie erwartet haben, dass rental.car2go.airport.berlin als eine Struktur interpretiert wird, oder? Nun, es ist keine Struktur, sondern nur eine Zeichenfolge.

+0

Ja, ich habe das erwartet. Wie sieht die Lösung aus, wenn das Objekt 'rental.car2go.airport.berlin' modifiziert wird? – mles

+0

Sie müssen Ihren JSON so strukturieren, dass jedes Element tatsächlich ein Objekt ist, wie "Flughafen" und "Modell". – FDavidov

+0

'$ scope.rental' und' $ scope.airports' müssen verschiedene Objekte bleiben – mles