个人中心
gpt4 book ai didi

angularjs - 如何以 Angular 同步不同模型

转载 作者：行者123 更新时间：2023-12-02 01:57:12 25 4
gpt4 key购买 nike 

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

最佳答案

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

例如

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

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

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

关于angularjs - 如何以 Angular 同步不同模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19353159/

25 4 0
文章推荐： google-chrome - 识别 Chrome 网页
文章推荐： raspberry-pi - 将 GPIO 引脚拉低作为关机前的最后一个 Action
文章推荐： remotipart - 使用 remotipart 插件上传图片时 Textarea 包裹 JS
文章推荐： ssis - 更改多个 SSIS 包的 DelayValidation
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com