Javascript Angularjs-在两个模型之间分配逻辑_Javascript_Angularjs_Angularjs Scope

Javascript Angularjs-在两个模型之间分配逻辑

javascript angularjs

Javascript Angularjs-在两个模型之间分配逻辑,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我是个新手。这是一个非常简单的问题- 在my index.html中，我在两个文本框中定义了两个模型：- <html><head><script...></head><body ng-app="myApp"ng-controller="MainController" > <input ng-model="tb1" type="text" name="numberofusers"/> <input ng-m

我是个新手。这是一个非常简单的问题- 在my index.html中，我在两个文本框中定义了两个模型：-

<html><head><script...></head><body ng-app="myApp"ng-controller="MainController" >  

<input ng-model="tb1"  type="text"  name="numberofusers"/>
 <input  ng-model="tb2" type="text"></input>

</body></html>

现在，我想要的是，无论我在第一个文本框（tb1）中键入什么，都会自动键入第二个文本框（tb2），反之亦然，但这并没有发生

猜猜看？

控制器中的代码

$scope.tb1=$scope.tb2将只执行一次（当控制器初始化时），这就是它不工作的原因
您需要将输入元素绑定到相同的模型
，然后Angular将自动为您处理双向绑定
<input ng-model="tb1"  type="text"  name="numberofusers"/>
<input ng-model="tb1" type="text"></input>

然后这两个元素将自动同步。但您知道，ng change
只能监视用户输入的更改，这意味着，如果您以编程方式更改tb1
或tb2
，则不会触发ng change

在这种情况下，您应该使用$scope.$watch

$scope.$watch('tb1', function(newValue) {
  $scope.tb2 = newValue;
}));

目前，它超出了您的要求。这是因为控制器只执行一次，并且如果$scope.tb2中有任何值，它将分配给$scope.tb1，但实际上这两个值都为空。
因此，您需要观察这些变化，并相互赋值，如：-
$scope.$watch('tb1',function(newVal){
$scope.tb2=newVal;
})

$scope.$watch('tb2',function(newVal){
$scope.tb1=newVal;
})

如果您想在前端管理它，您可以使用ng change指令，如
<input ng-model="tb1"  type="text" ng-change="tb2=tb1" name="numberofusers"/>
 <input  ng-model="tb2" type="text" ng-change="tb1=tb2"></input>

您可以使用双向绑定来实现这一点。例如：
创建您的指令：
var app = angular.module('myApp', []);

app.controller("myCtrl", function($scope) {
    $scope.myName = 'Carl';
}).directive("myDirective", function() {
    return {
        restrict: 'AE',
        scope: { 
            twowayBindingProp: '=myName'
        }
    }
});

并通过以下方式将其绑定：
<div ng-app="myApp">
<div ng-controller="myCtrl">
    <h1>From parent: </h1>
    <h3>parentProp2: <input ng-model="myName"></h3>
    <div my-directive my-name="myName">
        <h1>From child: </h1>
        <h3>twowayBindingProp: {{ twowayBindingProp }}</h3>
        <h1>Set from child:</h1> 
        twowayBindingProp： <input ng-model="twowayBindingProp">
    </div>
</div>
</div>


来自家长：
家长建议2：
从儿童：
twowayBindingProp:{{twowayBindingProp}}
从子对象设置：
双向绑定道具：
这正是您想要的，谢谢！它起作用了。。不，我不想从前端管理它。。请注意您的代码中有一点输入错误-$scope.$watch（'tb1'，function（newVal））{……应该是$scope.$watch（'tb1'，function（newVal）{……哦，很抱歉，很好，您得到了它。
var app = angular.module('myApp', []);

app.controller("myCtrl", function($scope) {
    $scope.myName = 'Carl';
}).directive("myDirective", function() {
    return {
        restrict: 'AE',
        scope: { 
            twowayBindingProp: '=myName'
        }
    }
});

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <h1>From parent: </h1>
    <h3>parentProp2: <input ng-model="myName"></h3>
    <div my-directive my-name="myName">
        <h1>From child: </h1>
        <h3>twowayBindingProp: {{ twowayBindingProp }}</h3>
        <h1>Set from child:</h1> 
        twowayBindingProp： <input ng-model="twowayBindingProp">
    </div>
</div>
</div>