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 个 watch ，每个方向一个:

从 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