Bind input model to every object in array

Question

I have a simple input like this:

<input type="text" ng-model="myModel" />

and an array in my controller like this:

myApp.controller('MyCtrl', function($scope) {
    $scope.arr = [
        {str: ''},
        {str: ''}
    ];
});

How to bind my inputs model to the str attribute of every single object in my arr?

Fiddle here.

Thanks for your help.

@Tushar I want just one input which controls content of any object in the array — DonJuwe
– DonJuwe, Commented Jun 27, 2016 at 13:47

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Use ng-change directive and update the scope using angular.forEach

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

myApp.controller('MyCtrl', function($scope) {
  $scope.arr = [{
    str: ''
  }, {
    str: ''
  }];
  $scope.updateIt = function(myModel) {
    angular.forEach($scope.arr, function(value, key) {
      value.str = myModel;
    });
  }
});

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

<div ng-app="myApp" ng-controller="MyCtrl">
  <code>{{arr}}</code>
  <br />
  <br />
  <!-- bind input model to every object 'str' -->
  <input type="text" ng-model="myModel" ng-change='updateIt(myModel)' />
</div>

Fiddle Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 27, 2016 at 13:48

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DonJuwe Over a year ago

Thanks @Rayon I was also thinking of this and was just wondering if there is a template-only solution for this kind of binding.

Mike Robinson Over a year ago

Without trying to dive specifically into Angular here, this might be a good application for HTML/JavaScript's existing mechanism of "event bubbling." Instead of trying to bind to every <input> tag, bind just once to their container. The code for the container will then have to determine which one of the child tags triggered the event. But this will work no matter how many child tags there are.

Collectives™ on Stack Overflow

Bind input model to every object in array

1 Answer 1

Fiddle Demo

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related