javascript - Angularjs 两种方式绑定(bind)

Question

嗨，我有一个奇怪的双向绑定(bind)场景，我无法解决。我有 3 个不同的文本输入字段，第 4 个文本输入字段有点像其他三个的串联。例如:

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

我真正想要的是 Text4 在 Text 1,2 或 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 我们将 watch 放在 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