Passing the `ng-repeat` element to javascript function

Question

I want to pass the ng-repeat element to javascript function tried but it is not working

 <tr ng-repeat="x in myArry">
                <td><input type="text" value="{{x.firstname}}" id="{{x.firstname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.firstname}}{{$index}})" /></td>
                <td><input type="text" value="{{x.lastname}}" id="{{x.lastname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.lastname}}{{$index}})"></td>
                <td><input type="text" value="" id="{{x.fullname}}{{$index}}"></td>
                <!--<td><label id="{{x.fullname}}{{$index}}"></label></td>-->
            </tr>

this my javascript function

function FirstNamseCon(value1,value2) {
        document.getElementById('B Madhukar0').value = document.getElementById(value1).value + ' ' + document.getElementById(value2).value;
    }

I want to pass the name last name id to function using {{x.firstname}}{{$index}} but I am getting x is undefined error how to solve this

first of all you are using angularjs so you dont need to assign data like native javascript function. Second post your html also or make a fiddle — Banik
– Banik, Commented Feb 26, 2016 at 9:20
you have whitspaces in your ids... You aren't using angularjs... I think that you need to study how to stay in an angularjs life cycle! — Hitmands
– Hitmands, Commented Feb 26, 2016 at 9:20
no my requirement is like that i will add javascript function i need to call that function like this. that is possible or not — Nagulu Vemula Nagulu vemula
– Nagulu Vemula Nagulu vemula, Commented Feb 26, 2016 at 9:21

Arun P Johny · Accepted Answer · 2016-02-26 09:24:38Z

1

A angular solution will be to use ng-model to update the values

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {

  $scope.myArry = [{
    firstname: 'John',
    lastname: 'Thomas',
    fullname: 'John Thomas'
  }, {
    firstname: 'Arun',
    lastname: 'Johny',
    fullname: 'Arun Johny'
  }]

  $scope.updateFullName = function(x) {
    x.fullname = x.firstname + ' ' + x.lastname
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <table>
      <tr ng-repeat="x in myArry">
        <td>
          <input type="text" ng-model="x.firstname" ng-change="updateFullName(x)" />
        </td>
        <td>
          <input type="text" ng-model="x.lastname" ng-change="updateFullName(x)">
        </td>
        <td>
          <input type="text" ng-model="x.fullname">
        </td>
      </tr>
    </table>
  </div>
</div>

answered Feb 26, 2016 at 9:24

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Nagulu Vemula Nagulu vemula Over a year ago

I know this approach but i am dng modifications with value field in javascript function thats why i am using value all are working fine but passing FirstNamseCon(this.id, {{x.firstname}}{{$index}}) not working

Pavan Teja · Accepted Answer · 2016-02-26 09:20:49Z

0

use angulars ng-blur insted onblur and write your FirstNamseCon in controlles as $scope.FirstNamseCon

answered Feb 26, 2016 at 9:20

Pavan Teja

3,2021 gold badge18 silver badges22 bronze badges

2 Comments

Nagulu Vemula Nagulu vemula Over a year ago

here i am calling javascript function not a angular function

Pavan Teja Over a year ago

is there any reason for doing it?

Shashank Agrawal · Accepted Answer · 2016-02-26 09:23:24Z

0

Use ng-model instead of value. Just change your code something like this:

<tr ng-repeat="x in myArry">
            <td><input type="text" ng-model="x.firstname" id="{{x.firstname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.firstname}}{{$index}})" /></td>
            <td><input type="text" ng-model="x.lastname" id="{{x.lastname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.lastname}}{{$index}})"></td>
            <td><input type="text" value="" id="{{x.fullname}}{{$index}}"></td>
            <!--<td><label id="{{x.fullname}}{{$index}}"></label></td>-->
        </tr>

But you don't have to use the onblur for this.

answered Feb 26, 2016 at 9:23

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

1 Comment

Nagulu Vemula Nagulu vemula Over a year ago

I know this approach but i am dng modifications with value field in javascript function thats why i am using value all are working fine but passing FirstNamseCon(this.id, {{x.firstname}}{{$index}}) not working

Amit Sirohiya · Accepted Answer · 2016-02-26 09:26:23Z

0

You can do like this -

 onblur="FirstNamseCon('firstName',$index,x)

and in your javascript code you can get id like this.

var id = x[type]+index;
 // A['firstName']+0

answered Feb 26, 2016 at 9:26

Amit Sirohiya

3331 silver badge13 bronze badges

Comments

Pankaj Parkar · Accepted Answer · 2016-02-26 09:35:44Z

Doing DOM manipulation inside controller considered as bad pattern, don't dare to do that if you wanted to manipulate scope variable's from jQuery.

Use ng-model over the input field to get two way binding feature of angular and then you could easily pass the value of scope ng-model value to your controller.

Also make you function available inside a scope by having, $scope.FirstNamseCon = FirstNamseCon exposed FirstNamseCon method in scope by assigning its reference to scope variable.

Markup

<tr ng-repeat="x in myArry">
    <td><input type="text" ng-model="firstName" ng-clur="FirstNamseCon(firstName)" /></td>
    <td><input type="text" ng-model="x.lastName" ng-blur="FirstNamseCon(x.lastName)"></td>
    <td><input type="text" ng-model="x.fullName" ng-blur="FirstNamseCon(x.lastName)"></td>
</tr>

Collectives™ on Stack Overflow

Passing the `ng-repeat` element to javascript function

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related