Javascript AngularJS将单个值绑定到两个变量。第二个变量未在视图中更新_Javascript_Angularjs

Javascript AngularJS将单个值绑定到两个变量。第二个变量未在视图中更新

javascript angularjs

Javascript AngularJS将单个值绑定到两个变量。第二个变量未在视图中更新,javascript,angularjs,Javascript,Angularjs,我有一个文本框，其值绑定到控制器中的$scope.stringOne。然后我有第二个变量，$scope.stringTwo，它是stringOne和更多文本的串联但是，当我在文本框中键入时，stringOne在视图中成功更新，但stringTwo保持不变还需要什么才能使这项工作正常，以便在更新stringOne时也更新stringTwo值 HTML <body ng-controller="mainCtrl"> <div class="container">

我有一个文本框，其值绑定到控制器中的

$scope.stringOne

。然后我有第二个变量，

$scope.stringTwo

，它是

stringOne

和更多文本的串联

但是，当我在文本框中键入时，

stringOne

在视图中成功更新，但

stringTwo

保持不变

还需要什么才能使这项工作正常，以便在更新

stringOne

时也更新

stringTwo

值

HTML

<body ng-controller="mainCtrl">
    <div class="container">       
        <label>Enter Text</label>
        <input type="text" ng-model="stringOne"/>
        <h1>{{stringOne}}</h1>
        <h1>{{stringTwo}}</h1>
    </div>
</body>

使用$watch

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

myApp.controller('mainCtrl',['$scope',function ($scope,) {

    $scope.stringOne = '';
    $scope.$watch('stringOne', function(new_value){
        $scope.stringTwo = new_value + ' more texts';
    });
}]);

官方
关于

为什么会这样

当您初始化

$scope.stringOne

时，它会接收空字符串，当您在html

ng model

属性中添加它时，它基本上会监视该变量的更改，但

$scope.stringTwo

您需要自己监视它

您可以在模板中组合它们，并查看更改。

{{stringOne+stringTwo}}

演示：

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'mainCtrl'，函数（$scope）{
$scope.stringOne=''；
$scope.stringTwo=‘更多文本’；
});

输入文本
{{stringOne}}
{{stringOne+stringTwo}
我很难理解为什么$scope.stringTwo
不属于自动监视的范围，因为我认为它是用{{stringTwo}
绑定到视图的。那么，ng模型是否为我创建了一个关于stringOne
的观察者呢？而简单地绑定到视图并不一定会创建一个观察者？视图不知道stringTwo
的更改，因为它是初始化的，值为“$scope.stringOne+”more text`，但它没有更改，只是初始化了，它不知道$scope.stringOne
，它只是收到了来自它的空字符串虽然这可以工作，但我可能应该更好地解释我的设置。我之所以在控制器中而不是在视图中进行组合，是因为stringTwo在其他函数中也用作变量。因此，如果在视图中合并它们，控制器中就不会有可用的变量。
var myApp = angular.module('myApp',[]);

myApp.controller('mainCtrl',['$scope',function ($scope,) {

    $scope.stringOne = '';
    $scope.$watch('stringOne', function(new_value){
        $scope.stringTwo = new_value + ' more texts';
    });
}]);