Angularjs

Question

我是 Angular 的新手。这是一个非常简单的问题—— 在我的 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>

在我的 app.js 中，我是这样定义的

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

app.controller('MainController', ['$scope', function($scope){
    $scope.tb1 = $scope.tb2;

}]);

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

有什么猜测吗？

Answer 1

您在控制器 $scope.tb1 = $scope.tb2; 中的代码只会执行一次（当控制器初始化时），这就是它不起作用的原因。

您需要将输入元素绑定到同一个 model 然后 Angular 会自动为您处理双向绑定。

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

或者如果您想为不同的元素使用两种不同的模型，您可以向 input 的 ng-change 事件侦听器添加一个钩子，例如

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

然后这两个元素会自动同步。但是你知道吗，ng-change只能监听用户输入的变化，也就是说，如果你可编程地改变tb1或tb2，ng-change将不会被触发。

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

监控模型的变化

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

目前超出您的要求。

Answer 2

这是因为控制器只会执行一次，如果 $scope.tb2 中有任何值，它将分配给 $scope.tb1 但最初它们都是空白的。因此，您需要 $watch 更改并为彼此分配价值，例如 :-

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

Answer 3

您可以使用双向绑定来实现。一个例子是：JSFiddle

创建您的指令：

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>

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

Angularjs - assigning logic between two models

javascript

angularjs-scope