Comment appeler la valeur quand ng-model avec ng-repeat est utilisé? Angular JS

J'ai un problème de ng-model ne recevant pas appelé dans le contrôleur si j'utilise ng-repeat. Comme vous pouvez le voir ci-dessous, dans la section sports, j'obtiens la valeur de sport indéfinie lorsque le formulaire est soumis au contrôleur. Cependant, pour les demandes, je reçois tout ce que je saisis dans le champ. J'ai essayé d'identifier par ID mais cela ne fonctionne pas aussi bien.Comment appeler la valeur quand ng-model avec ng-repeat est utilisé? Angular JS

<form ng-submit="sendDetails(sports, demands)" ng-class="form-horizontal" enctype="multipart/form-data"> 
<div class="row"> 
    <div class="form-group col-md-6"> 
     <label class="control-label col-sm-2">Sports:</label> 
     <input class="form-control" ng-model="sports" ng-repeat="sports in selectedSports" type="text" disabled/> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
     <input class="form-control" ng-model="demands" type="text"/> 
    </div> 
    <div class="col-md-6"> 
     <button class="btn btn-default" type="submit">Submit</button> 
    </div> 
</div> 
</form>

angular.factory('sportsFactory', function($http) { 
return { 
    postAdministrationEntries: function ($sports, $demands){ 
     var fd = new FormData(); 
     fd.append('sports', $sports); 
     fd.append('demands', $demands); 
     return $http.post('/sendDetails', fd,{ 
     headers: { 'Content-Type': undefined } 
     }); 
    } 
}

Contrôleur

$scope.sportsValues =[]; 
$scope.sendDetails = function($sports, $demands){ 
    if($demands.length > 0){ 
     var sendDetailsPromise = sportsFactory.sendDetails($sports, $demands); 
     sendDetailsPromise.success(function (data){ 
      $sportsValues = data; 
};

Source

2017-07-28 John Smith

Le code a des problèmes parce que la 'ng répétition 'crée des étendues enfant et place le' ng-model' sur la portée de l'enfant. Souvenez-vous de la meilleure pratique: ** Mettez toujours un point '.' dans votre ng-models **. Lisez [Quelles sont les nuances de l'héritage prototypal/prototypique de portée dans AngularJS?] (Https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). – georgeawg

Y a-t-il une raison pour laquelle le serveur doit publier en utilisant 'multipart/form-data'? Il est plus efficace de POST avec le paramètre par défaut AngularJS 'application/json'. – georgeawg

Le tableau 'selectedSports' est-il un tableau d'objets ou un tableau de primitives? – georgeawg

Il est probablement parce que chaque boucle à travers vous assignez le même modèle à chaque fois. Vous devez utiliser l'indice de $ de la boucle en combinaison avec le modèle:

<input class="form-control" 
    ng-model="sports[$index]" 
    ng-repeat="sports in selectedAttributes track by $index" 
    type="text" disabled />

Bien que je suis sûr que vous vous rendez compte que, en étant désactivé, l'entrée ne va jamais être réellement changé à partir du modèle que vous lui donnez (en supposant que ce n'est pas vide).

Source

2017-07-28 11:08:32 rrd

Salut, Merci pour votre réponse mais il me donne encore une valeur indéfinie ou une valeur vide. –

Où est le code de votre contrôleur? Vous montrez l'usine, mais je ne vois pas de contrôleur. – rrd

Salut, il ne donne pas de valeur dans la phase initiale de l'usine mais j'ai modifié le code avec le contrôleur maintenant. N'hésitez pas à regarder le contrôleur. Merci –

La façon la plus courante de travailler avec un tableau d'objets, est d'avoir la ng-model utiliser une propriété de chaque objet:

angular.module("app",[]) 
 
.controller("ctrl", function($scope) { 
 
    $scope.itemList = [ 
 
    {name: 'apple', value: 11}, 
 
    {name: 'orange', value: 22}, 
 
    {name: 'peach', value: 33}, 
 
    ]; 
 
})

<script src="//unpkg.com/angular/angular.js"></script> 
 
    <body ng-app="app" ng-controller="ctrl"> 
 
    <h3>ng-repeat DEMO</h3> 
 
    <div ng-repeat="item in itemList"> 
 
     {{item.name}} <input ng-model="item.value" /> 
 
    </div> 
 
    <hr> 
 
    {{itemList | json}} 
 
    </body>

Source

2017-07-28 15:43:26 georgeawg

Merci, je vais essayer. –

Comment appeler la valeur quand ng-model avec ng-repeat est utilisé? Angular JS

Répondre

Questions connexes