Question

<input ng-model='yourName'>
<p>{{yourName}}</p>

当我在输入yourName中输入一些字词时，<p>会显示我输入的内容。

===

如果我需要在不同的模型中进行一些同步，例如

 <input ng-model='start'>
 <input ng-model='end'>
 <input ng-model='step'>,default 10.

当我将模型start更改为1时，它会自动将模型end更新为11，反之亦然。

我该怎么办？ 此问题已解决。请添加type="number"，谢谢

<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
    <script src="lib/angular/angular.js"></script>
</head>
<body ng-controller='MyController'>
        <input type="number" ng-model="start">
        <input type="number" ng-model="end">
        <input type="number" ng-model="step">

<script>
    function MyController($scope){
        $scope.$watch('start',function(newStart){
            $scope.end = newStart + $scope.step;
            console.log(1);
        })  ;
        $scope.$watch('end',function(newEnd){
            $scope.start = newEnd - $scope.step;
            console.log(2);
        })  ;

        $scope.step = 10;
    }
</script>
</body>
</html>

Answer 1

在您的控制器中，使用$scope.$watch()执行每个属性更改时的行为。

e.g。

$scope.$watch('dateStart', function (newDateStart) {
    if (!newDateStart) return;
    $scope.dateEnd = newDateStart;
});

$scope.$watch('dateEnd', function (newDateEnd) {
    if (!newDateEnd) return;
    $scope.dateStart = newDateEnd;
});

请注意，我建议您首先检查其他字段是否已有值，或者用户是否已手动修改它。如果是这样，请不要自动更改其他字段。否则，您将永远覆盖用户为其他字段选择的内容。

如何在角度中同步不同的模型

1 个答案: