Question

我尝试实现以下功能。有2个文本框。当我们在方框1上键入时，方框2也将具有方框1的值，反之亦然。

使用相同的ng-model会这样做，但我需要学习如何使用元素（引用）并在控制器中识别它们

<body ng-app="myApp" ng-controller="myControl">
    Name 1 : <input type="text" ng-model="name1"  ng-change="change1()" />

    Name 2 : <input type="text"  ng-model="name2" ng-change="change2()" >
</body>

var app = angular.module('myApp', []);
app.controller('myControl',function($scope,$http){ 

$scope.change1 = function(){
    $scope.name2= $scope.name1;
}
$scope.change2 = function(){
    $scope.name1= $scope.name2;
}

});

Fiddle of the code

如何使用一个函数而不是使用两个函数change1和change2（我想如果我传递一个引用就可以完成。但是我找不到办法做到这一点）？

Answer 1

通过将ng-model值结构设置为对象，然后Javascript prototypal将完成这一操作，当您将name1对象分配给name2时，它们都会遵循相同的对象，因为任何值数组中的更新都会更新其他。这就是为什么我们不想要这样的功能然后我们使用对象的克隆，在jQuery中.clone()＆amp;在angular中它被称为angular.copy，它创建了一个不符合此规则的对象的新深层副本。

<强>标记

Name 1 : <input type="text" ng-model="name1.value"/>

Name 2 : <input type="text"  ng-model="name2.value"/>

<强>代码

var app = angular.module('myApp', []);
app.controller('myControl',function($scope,$http){ 
    $scope.name1= {};
    $scope.name2= {};
    $scope.name1= $scope.name2; //will update two object according no need of ng-change
});

Forked Fiddle

Answer 2

看看这个你在ng-change上调用相同功能的代码，它可以正常工作

<body ng-app="myApp" data-ng-controller="MainCtrl" id="div1">
  Name 1 : <input type="text" ng-model="name1"  ng-change="change1(name1)" />

    Name 2 : <input type="text"  ng-model="name2" ng-change="change1(name2)" />

 <script>
  var app = angular.module('myApp', []);

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

    $scope.change1 = function(val){
     $scope.name2= val;
     $scope.name1=val;
    }


    });
  </script>


</body>

通过在AngularJS中传递目标元素来优化代码

2 个答案: