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未定义错误如何解决此问题

Answer 1

角度解决方案是使用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>

Answer 2

使用ng-blur投注onblur {}}并将FirstNamseCon作为$scope.FirstNamseCon

写在对照中

Answer 3

在控制器内执行DOM操作被视为坏模式，如果你想操纵范围变量，就不敢这样做来自jQuery。

在输入字段上使用ng-model以获得角度的双向绑定功能，然后您可以轻松地将范围ng-model值的值传递给控制器。

通过在范围变量中分配对$scope.FirstNamseCon = FirstNamseCon方法的公开FirstNamseCon方法，使您在范围内可用。

<强>标记

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

Answer 4

使用ng-model代替value。只需更改您的代码：

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

但您不必使用onblur。

Answer 5

你可以这样做 -

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

在您的javascript代码中，您可以获得这样的ID。

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

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

5 个答案: