javascript - 将 `ng-repeat` 元素传递给 JavaScript 函数

Question

我想将 ng-repeat 元素传递给尝试过的 javascript 函数，但它不起作用

 <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>

这是我的 JavaScript 函数

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

我想使用 {{x.firstname}}{{$index}} 将姓名 id 传递给函数，但我收到 x is undefined 错误怎么解决这个问题

Answer 1

一个 Angular 解决方案是使用 ng-model 来更新值

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>