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

当我在 input 中输入一些单词时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>
4

1 回答 1

2

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

例如

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

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

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

于 2013-10-14T04:11:06.023 回答