AngularJS ng-repeat abhängig von einer anderen ng-repeat

Ich habe ein Array (helper.makes) wie folgt:AngularJS ng-repeat abhängig von einer anderen ng-repeat

[0] => { make: 'BMW', models: ['3 series','5 series'] } 
[1] => { make: 'Honda', models: ['Camry','Corolla'] }

In meinem wählen möchte ich den Benutzer auszuwählen machen und aktualisieren Sie dann das Modell auswählen entsprechend . Hier ist mein Code so weit:

<label> 
    <p>Make</p> 
    <select ng-model="make"> 
    <option ng-repeat="(key, value) in helper.makes | orderBy: 'name'">{{ value.name }}</option> 
    </select> 
</label> 
<label> 
    <p>Model</p> 
    <select ng-model="model"> 
    <option ng-repeat="(key, value) in helper.getModelByMake(make) | orderBy: value">{{ value }}</option> 
    </select> 
</label>

Bevor ich einfach ein assoziatives Array verwendet, so konnte ich helper.makes tun [machen], aber das hielt sie in ein Objekt drehen und Winkel weigerte sich, es zu bestellen. Auf diese Weise habe ich die Funktion getModelByMake erstellt, die einfach die Liste der Marken durchläuft, die richtige findet und das Modell-Array zurückgibt.

Das Problem ist, das scheint nicht zu aktualisieren, wie die Person die Marke ändert. Ich glaube, dass es versucht, einmal zu laden, zu sehen, dass keine Marke ausgewählt wird und leere Ergebnisse zurückgibt.

Welche Methode wäre am besten für eine solche Instanz in AngularJS? Gibt es etwas Unglaubliches, was AngularJS hier tun kann, wovon ich nichts weiß?

Quelle

2016-07-12 Samir

Haben Sie "ng-repeat-start" und "ng-repeat-end" probiert? – varit05

Lass mich das nachsehen. – Samir

Ich sehe nicht, wie das sinnvoll wäre. Es scheint, dass es mir einfach erlauben würde, Code außerhalb der Tags zu wiederholen: http://stackoverflow.com/questions/28940257/significance-of-ng-repeat-start-vs-ng-repeat – Samir

Zuallererst empfehle ich Ihnen, ngOptions anstelle von ngRepeat zu verwenden. ngOptions wurde genau für diese Art von Dingen gemacht.

Auch brauchen Sie nicht ngChange Richtlinie oder $watch zu verwenden, müssen Sie nur die Modelle erhalten array vom ngModel im ngOptions ersten ausgewählt, wie unten:

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

 
.controller('mainCtrl', function($scope) { 
 
    $scope.makes = [ 
 
    { 
 
     "make":"BMW", 
 
     "models":[ 
 
      "3 series", 
 
      "5 series" 
 
     ] 
 
    }, 
 
    { 
 
     "make":"Honda", 
 
     "models":[ 
 
      "Camry", 
 
      "Corolla" 
 
     ] 
 
    } 
 
    ]; 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <label> 
 
    <p>Make</p> 
 
    <select ng-model="make" ng-options="objMake as objMake.make for objMake in makes"> 
 
    </select> 
 
    </label> 
 
    <div ng-if="make"> 
 
    <label> 
 
     <p>Model</p> 
 
     <select ng-model="model" ng-options="model for model in make.models"> 
 
     </select> 
 
    </label> 
 
    </div> 
 
</body> 
 

 
</html>

Hinweis: verwendete ich ng-if keine hide die zweite se lect, wenn die erste select keine Auswahl hat.

Quelle

2016-07-12 02:36:42 developer033

Sie haben recht, das scheint eher der eckige Weg zu sein Es vermeidet ziemlich viel nutzlosen Code. Ich tat es auf diese Weise und fügte einfach die orderBy in den ng-Optionen hinzu. Danke für die Hilfe und mich in der eckigen Weise zu halten! – Samir

Ein Vergnügen zu helfen :) – developer033

Sie würde dann zufällig nicht wissen wie ich den default einstellen würde würdest du?Nun, da der Wert sich auf ein Objekt bezieht, weiß ich nicht, wie ich das manuell einstellen würde. – Samir

Sie ng-change in der make-Option verwenden könnten und so etwas wie dies erstellen:

<label> 
    <p>Make</p> 
    <select ng-model="make"> 
    <option ng-repeat="(key, value) in helper.makes | orderBy: 'name'" ng-change="getModelByMake()">{{ value.name }}</option> 
    </select> 
</label> 
<label> 
    <p>Model</p> 
    <select ng-model="model"> 
    <option ng-repeat="(key, value) in helper.model | orderBy: value">{{ value }}</option> 
    </select> 
</label>

Dann in Ihrer getModelByMake() Funktion geben Sie die Make ID bekommen und die Modelle bekommen.

Quelle

2016-07-12 02:19:30 currarpickt

Ja, das funktioniert einwandfrei, danke. Da die Funktion getModelByMake im Hilfeservice war, musste ich das make senden. (z. B. ng-change = "helper.getModelByMake (make)" – Samir

Ich entschied mich für die Antwort von developer033, weil sie eckiger war. Diese hat aber funktioniert, danke. – Samir

AngularJS ng-repeat abhängig von einer anderen ng-repeat

Antwort

Verwandte Themen