What is the angularJs way to pass variable value back to controller

Question

I am new to angularJs. I am having a page which uses the ng-repeat to generate new records:

<tr ng-repeat="obj in objs">
  <td>
    <input type="text" value="{{obj.name}}" />
  </td>
  <td>
    <input type="text" value="{{obj.amount}}" />
  </td>
  <td>
    <input type="text" value="{{obj.status}}" />
  </td>
</tr>

As they are all input fields. All of the data are writable to the customer. When submitting form, I am trying to get the updated data. Using the code below:

$scope.submitform = function(index) {
  var objJson = JSON.stringify($scope.objs);
  $('input[id$="objList"]').val(objJson);
  saveForm();
}

But seems $scope.objs is not updated by customer input, which I can quite understand. But the problem is, how should I pass the values back to $scope.objs? I can definitely use the jQuery to do that but which might not sound very angularJs. So what is the best way in angularJs to achieve that?

@Satpal because I haven't learnt that yet... I am reading the document about it now — Lance Shi
– Lance Shi, Commented Oct 16, 2015 at 11:16
use <input type="text" ng-model="inputTest" value="{{obj.name}}"/> and you can access it in controller using scope like $scope.inputTest — Krupesh Kotecha
– Krupesh Kotecha, Commented Oct 16, 2015 at 11:17

Ron C · Accepted Answer · 2015-10-16 12:02:54Z

You should use ng-model instead of value:

<tr ng-repeat="obj in objs">
    <td>
        <input type="text" ng-model="obj.name"/>
    </td>
    <td>
        <input type="text" ng-model="obj.amount"/>
    </td>
    <td>
        <input type="text" ng-model="obj.status"/>
    </td>
</tr>

This will update $scope.objs when the user edits an input field.

It works because ng-model is binding the value of the input with the field specified in the ng-model attribute, and obj is just an alias for objs[$index] ($index is supplied automatically by angular inside ng-repeat).

So in this input field:

<input type="text" ng-model="obj.name"/>

you are binding input.value with $scope.objs[$index].name.

Kishor Vitekar · Accepted Answer · 2015-10-16 11:30:54Z

Angular has a MVVM architecture. You can bind any controller data to the view(i.e html) and access changed data in controller.

If you want to send only data from controller to HTML you can use ngBind directive. If you want to two way binding i.e. from controller to HTML and from HTML to controller also then use ngModel directive. In current scenario you require ngModel directive.

Please see below code :

                 <tr ng-repeat="obj in objs">
                    <td>
                        <input type="text" ng-model="obj.name" />
                    </td>
                    <td>
                        <input type="text" ng-model="obj.amount" />
                    </td>
                    <td>
                        <input type="text" ng-model="obj.status" />
                    </td>
                </tr>

When you change any data from HTML , It automatically reflect in your angular's controller. i.e in $scope.objs object.

Sarjan Desai · Accepted Answer · 2015-10-16 11:46:51Z

1

Use ng-model for passing value to controller.

Demo for ng-model

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "Krupesh";
  $scope.lastName = "Kotecha";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{firstName + " " + lastName}}
</div>

edited Oct 16, 2015 at 11:46

Sarjan Desai

3,7332 gold badges21 silver badges32 bronze badges

answered Oct 16, 2015 at 11:22

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

1 Comment

Lance Shi Over a year ago

Thank you for your answer. Both answers work for me quite well. I clicked add one for this answer. But since Ron's answer is more concise which directly points to my issue, I chose his as selected.

Collectives™ on Stack Overflow

What is the angularJs way to pass variable value back to controller

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related