4

The answer appears to be that the two way data binding works if you have an array of objects going to an ng-repeat, but did doesn't work if you have an array of strings.

I wish to provide a UI where users can input multiple recipients. I've got an array of names called "receivers". My thought was I could display a table using ng-repeat, like so:

<table>
    <tr ng-repeat = "receiver in receivers">
        <td><input type = "text" ng-model = "receiver"></td>
        <td><div ng-click = "addRecipient(receiver)">+</div></td>
        <td><div ng-click = "deleteRecipient(receiver)">-</div></td>
    </tr>
</table>

The problem I'm running in to is that I know of no way to get the contents of "receiver" back to my controller, other than from the calls to addRecipient or deleteRecipient. Which makes it hard for me to use that data.

Any suggestions would be greatly appreciated. If there's a better or "more correct" way to do this, I'd love to see it.

4
  • are you saying that the receivers array doesn't update if you change the value of one of the receiver items? err never mind, I think what you are trying to say is you want to add the element from one list into a different list?
    – Claies
    Commented Jan 28, 2015 at 1:29
  • 1
    I'm trying to puzzle out what your issue is here and why the calls are making it "hard for you to use the data". Perhaps a bit more context is needed, like what you are having trouble doing with the data and/or what your functions actually do.
    – Claies
    Commented Jan 28, 2015 at 1:35
  • There is no two way data binding between the input field, and anything that I have access to from within my controller. So I can not respond to user data entry Commented Jan 28, 2015 at 23:00
  • Yes, I'm saying that the receivers array doesn't update if you change the value of one of the receiver items. Commented Jan 28, 2015 at 23:01

3 Answers 3

5

You don't need to do anything extra. Whatever text is typed into the text fields on your page will automatically be present in your $scope.receivers array. I always define my scope variable explicity in my controller.

I have a working example but using a simple object instead of Strings, that could be the issue.

http://plnkr.co/edit/g66KTkDPlWt0xs5EZrrx?p=preview

script:

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

app.controller('MainCtrl', function($scope) {
  $scope.name="Nick";
  $scope.receivers=[{value:"First"}];

  $scope.addRecipient = function(receiver) {
    $scope.receivers.push({value:""});
  }

  $scope.deleteRecipient = function(receiver) {
    for(var i=0; i<$scope.receivers.length; i++) {
      if($scope.receivers[i] === receiver) {
        $scope.receivers.splice(i, 1);
        break;
      }
    }
  }

  $scope.showme = function() {
    var s = "";
    for(var i=0; i<$scope.receivers.length; i++) {
      s = s + i + ": " + $scope.receivers[i].value + "\n";
    }
    alert(s);
  };

});

html:

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <table>
        <tr ng-repeat = "receiver in receivers">
            <td><input type="text" ng-model="receiver.value"></td>
            <td><div ng-click="addRecipient(receiver)">+</div></td>
            <td><div ng-click="deleteRecipient(receiver)">-</div></td>
        </tr>
    </table>    

    <button ng-click="showme()">Show Me Contents</button>

  </body>

</html>
3
  • I assumed that would be the case, but that's not what I'm seeing when I dump $scope.receivers with console.log Commented Jan 28, 2015 at 20:57
  • Updated answer with a working example. I had an issue trying to use strings directly but using objects instead worked fine. See example for details. Commented Jan 28, 2015 at 22:03
  • Thank you, I'll try that out. If I have to use objects to make it work, I'm willing to do that. Commented Jan 28, 2015 at 23:03
1

The problem I'm running in to is that I know of no way to get the contents of "receiver"

If you want to evaluate an expression (or in your case display information for each "receiver") you could use the operator "{{yourExpression}}".

Example : <td>{{receiver.oneAttribute}}</td>

See this documentation for more informations : https://docs.angularjs.org/guide/expression

1
  • 1
    Sorry, I wasn't clear: I'm trying to get the information in "receiver" back into my controller, but I can't, because it is in the ng-repeat's scope Commented Jan 28, 2015 at 1:16
0

You can use this method on the site

https://stackblitz.com/edit/data-api-rest-angular

I put to use

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.