javascript - AngularJS数据将单个值绑定(bind)到两个变量。第二个变量未更新

我有一个文本框，其值绑定到控制器中的$scope.stringOne。然后，我有第二个变量$scope.stringTwo，它是stringOne和更多文本的串联。

但是，当我在文本框中键入内容时，stringOne已在视图中成功更新，但stringTwo保持不变。

要使此工作有效，还需要什么，以便在更新stringTwo时也更新stringOne值？

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

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

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

$scope.stringOne = '';
$scope.stringTwo = $scope.stringOne + ' more texts';

}]);

最佳答案

使用$ 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';
    });
}]);

官方docs
关于watch的有用帖子

为什么会这样

初始化$scope.stringOne时，它会收到一个空字符串，并将其添加到html ng-model属性中时，它基本上会监视该变量的更改，但是$scope.stringTwo您需要自己监视它

stringone

javascript - AngularJS数据将单个值绑定(bind)到两个变量。第二个变量未更新