Question

我有一个包含两个输入字段的表单，我希望在用户默认输入第一个输入字段时同步下一个输入字段，用户可以根据需要编辑第二个字段，下面的代码工作正常：< / p>

    <input type="text" ng-model="name">
    <input type='text' value='{{name}}'>
    <button ng-click='submit()'>submit</button>

但是，为了能够获得第二个字段的值，我需要将ng-model放到第二个字段，一旦我放ng-model，它就不再同步了。< / p>

This is the example

如果我没有ng-model，我应该如何获得第二个字段的值。

谢谢。

Answer 1

您可以使用ng-change。当用户更改输入1时，将调用ng-change方法并更新input2。但是当用户更改输入2时，将不会调用任何内容。

<DIV ng-app='app'>
    <form ng-controller='myController'>
     <input type='text' ng-model='name' ng-change="callMe()"/>
     <input type='text' ng-model="name2"  />{{name2}}
    </form>
</DIV>

和控制器js

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

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

    $scope.callMe =function(){

    $scope.name2=$scope.name;
    }

   //$scope.name
   //$scope.name2
})

update fiddle example

Answer 2

您可以根据需要使用$scope.$watch方法。

我已更新您的fiddle。

我所做的很简单，每次模型更改时，$watch都会使用模型的新值调用，然后您只需要将值复制到第二个模型中。

Answer 3

我想到的第一种方法是ng-bind一个带有setter的属性，可以做你想做的事情：

 <input type='text' ng-model='nameModel' />

然后

app.controller('myController', function($scope) {
    Object.defineProperty($scope, 'nameModel', {
        get: function() { return $scope.name1; },
        set: function(x) { $scope.name1 = $scope.name2 = x; }
    });
});

这导致对nameModel的任何编辑都会影响name1和name2。

Fiddle

您可以围绕name2执行类似的包装，以跟踪它是否曾被修改过（脏/原始），并且只有nameModel只更改scope.name2，如果它是原始的。

Fiddle with better user experience

（如果您正在使用Angular forms，它会为您跟踪字段状态，因此您可以直接查看form.name2.$pristine。）

Answer 4

似乎您需要将值设置为范围变量。

所以你的代码看起来像这样：

<input type="text" ng-model="name">
<input type='text' value="{{name}}" ng-model="somethingelse">
<button ng-click='submit()'>submit</button>

希望有所帮助。

HTML输入同时包含{{}}和ng-model

4 个答案: