AngularJS: Bind back to array of inputs

Question

I have an array of string that I want to bind to an array of inputs:

HTML:

<ul>
<li class="form-group" ng-repeat="remark in trip.remarks track by $index">
    <label>Remarque {{$index + 1}}:</label>
    <textarea class="form-control" type="text" ng-model="remark"></textarea>
</li>
<hr>
</ul>
<button ng-click="addRemark()" class="btn btn-success" style="width: 100%">Ajouter</button>`

In my controller I have already initialized the trip object, and the binding does happen, but when I edit the data through the textarea nothing changes in the trip object.

The is how my controller is coded:

$scope.trip = productService.getCurrentTrip();

$scope.addRemark = function () {
    $scope.trip.remarks.push("");
}

It seem the binding is happening only from the controller to the view, also when I click addRemark button a new textarea does appear. So can anyone tell me how can I bind back to the controller?

NB:

1)I also tried to bind to this controller using ng-model="trip.remarks[$index]" but no use.

2) I have other fields in trip object that are binded and working two-ways

alexhuang · Answer 1 · 2018-01-24T20:46:10.653

This is an example of prototypal inheritance which you can further explore here.

In your code snippet here:

ng-repeat="remark in trip.remarks track by $index"

Ng-repeat is creating a child scope for every remark in your trip object, and since remark is a primitive type, any modifications to it are getting hidden/shadowed and only modifying the child scope. The solution is therefore to utilize the "." notation as lzagkaretos mentioned, or bind your ng-model to an object reference as opposed to the primitive (string).

score 0 · Answer 2 · answered Jan 24 '18 at 19:55

0

Option 1 should work. See working plunker.

ng-model="trip.remarks[$index]"

If it does not work for you, please check the trip object structure, maybe it is not as clear as something like {"remarks":["remark 1","remark 2d"]}.

answered Jan 24 '18 at 19:55

lzagkaretos

2,842
2
16
26

score 0 · Answer 3 · answered Jan 24 '18 at 20:40

You need to make sure the textarea NgModel is pointing to the same reference. To do so, create an array of objects where you only edit one value of that object.

Here's an example:

angular.module("app",[]).controller("myCtrl", function($scope){

$scope.trip = {};
$scope.trip.remarks = [
{"name": "1", "value": "hello world 1"},
{"name": "2", "value": "hello world 2"},
{"name": "3", "value": "hello world 3"},
];

$scope.test = function(){
  alert($scope.trip.remarks[0].value + " | " + $scope.trip.remarks[1].value + " | " + $scope.trip.remarks[2].value);
};

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>


<div ng-app="app" ng-controller="myCtrl">

ul>
<li class="form-group" ng-repeat="remark in trip.remarks track by $index">
    <label>Remarque {{$index + 1}}:</label>
    <textarea class="form-control" type="text" ng-model="remark.value"></textarea>
</li>
<hr>
</ul>
<button ng-click="test()" class="btn btn-success" style="width: 100%">Ajouter</button>

</div>

AngularJS: Bind back to array of inputs

3 Answers3