Angularjs 两种方式绑定

Question

您好，我有一个无法解决的双向绑定的奇怪场景。我有 3 个不同的文本输入字段和第 4 个是其他三个的串联。例如：

Text1: A
Text2: B
Text3: C
Text4: A/B/C

我真正想要的是 Text4 自动更新，因为 Text 1,2 or 3 已更新，反之亦然！

有什么想法吗？我完全被这件事难住了......

干杯， 乔恩

Answer 1

只要您有一个分隔符（看起来您使用的是“/”），它就非常简单。

首先是我们的html：

Text 1: <input ng-model="text1">
Text 2: <input ng-model="text2">
Text 3: <input ng-model="text3">
Text 4: <input ng-model="text4">

然后我们会做 2 个手表，每个方向一个：

从 1、2、3 到 4。这将 1,2,3 与我们的分隔符连接起来并观察该值。如果连接的结果发生变化，那么我们用结果更新 4。

$scope.$watch (
      function () {
         return $scope.text1+'/'+$scope.text2+'/'+$scope.text3;
      },function(newval) {
          $scope.text4 = newval;
      });

从 4 到 1,2,3 我们将手表放在 4 上，当它发生变化时，使用分隔符将 1,2 和 3 分开：

 $scope.$watch ('text4',
         function(newval) {
             texts = newval.split("/");
             $scope.text1 = texts[0];
             $scope.text2 = texts[1];
             $scope.text3 = texts[2];
         });

Working fiddle