javascript - 如何在 Angular 中为一个模型使用字符串的一部分？

Question

我刚刚开始使用 Angular JS 将我的模型绑定(bind)到一些输入字段。我的模型包含一个电话号码，格式为单个字符串:“1234567890”。

function Ctrl($scope) {
    $scope.phone = "1234567890";
}

我想要三个输入字段，它们与电话号码的相关部分(区号、三位数、四位数)相关联。

<div ng-controller="Ctrl">
    (<input type="text" maxlength="3">) <input type="text" maxlength="3"> - <input type="text" maxlength="4">
</div>

但是，我在为每个输入字段创建到电话字符串部分的双向绑定(bind)时遇到了问题。我已经尝试了两种不同的方法:

方法一

---- JavaScript ----

function Ctrl($scope) {
    $scope.phone = "1234567890";
    $scope.phone1 = $scope.phone.substr(0,3);
    $scope.phone2 = $scope.phone.substr(2,3);
    $scope.phone3 = $scope.phone.substr(5,4);
}

---- HTML ----

<div ng-controller="Ctrl">
    (<input type="text" maxlength="3" ng-model="phone1">) <input type="text" maxlength="3" ng-model="phone2"> - <input type="text" maxlength="4" ng-model="phone3">
</div>

方法二

---- JavaScript ----

function Ctrl($scope) {
    $scope.phone = "1234567890";
}

---- HTML ----

<div ng-controller="Ctrl">
    (<input type="text" maxlength="3" ng-model="phone.substr(0,3)">) <input type="text" maxlength="3" ng-model="phone.substr(2,3)"> - <input type="text" maxlength="4" ng-model="phone.substr(5,4)">
</div>

Answer 1

使用方法 1，但添加 $watch:

$scope.$watch(
  function() {return $scope.phone1 + $scope.phone2 + $scope.phone3; }
 ,function(value) { $scope.phone = value; }
);

fiddle

我更喜欢@Karl 的版本:

$scope.$watch('phone1 + phone2 + phone3',
   function(value) { $scope.phone = value; }
);