How to call the value when ng-model with ng-repeat is used? Angular JS

Question

I have a problem of ng-model not geting called in controller if I use ng-repeat. As you can see below, in sports section, I get the sports value undefined when the form is submitted in controller however for demands, I get whatever I input into the field meaning it gets the value. I tried to identify by id however it does not work as well.

<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 }
        });
    }
}

Controller

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

The code has problems because the `ng-repeat` creates child scopes and is putting the `ng-model` on those child scope. Remember the best practice: **Always put a dot `.` in your ng-models**. Read [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). — georgeawg, Jul 28 '17 at 12:11
Is there some reason that the server needs to post using `multipart/form-data`? It is more efficient to POST with the AngularJS default of `application/json`. — georgeawg, Jul 28 '17 at 13:49
Is the `selectedSports` array an array of objects or an array of primitives? — georgeawg, Jul 28 '17 at 13:51
@georgeawg Hi, I am using a form to post taking these values there I declared multipart/form-data. Is there any alternatives (I will look on application/json)? selectedSports is array of objects. — John Smith, Jul 28 '17 at 15:04

score 1 · Answer 1 · answered Jul 28 '17 at 11:08

1

It's probably because each loop through you are assigning the same model each time. You need to use the $index of the loop in combination with the model:

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

Although I'm sure you realise that by being disabled, the input is never going to actually be changed from the model you give it (assuming it's not empty).

answered Jul 28 '17 at 11:08

rrd

5,789
3
28
36

Hi, Thanks for your reply however it still giving me undefined value or any empty value. – John Smith Jul 28 '17 at 12:13
Where is your controller code? You show the factory, but I don't see a controller. – rrd Jul 28 '17 at 12:14
Hi, it doesn't give value in initial factory stage however I have edited the code with the controller now. Feel free to look at the controller. Thanks – John Smith Jul 28 '17 at 12:22

score 0 · Answer 2 · answered Jul 28 '17 at 15:43

The most common way to work with an array of objects, is to have the ng-model use a property of each object:

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>

Thanks I will give that a go. – John Smith Jul 28 '17 at 15:56 — John Smith, Jul 28 '17 at 15:56

How to call the value when ng-model with ng-repeat is used? Angular JS

2 Answers2