I'm just starting to use Angular JS to bind my model to a number of input fields. My model includes a phone number, formatted as a single string: "1234567890".

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

I would like to have three input fields that are tied to the relevant parts of the phone number (area code, three digit number, four digit number).

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

However, I'm having trouble creating a two-way binding for each input field to the parts of the phone string. I have already tried two different approaches:

Approach 1

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

Approach 2

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

I'm just starting to use Angular JS to bind my model to a number of input fields. My model includes a phone number, formatted as a single string: "1234567890".

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

I would like to have three input fields that are tied to the relevant parts of the phone number (area code, three digit number, four digit number).

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

However, I'm having trouble creating a two-way binding for each input field to the parts of the phone string. I have already tried two different approaches:

Approach 1

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

Approach 2

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

• javascript
• angularjs

• 1 Does that 2nd approach even work? – kentcdodds Commented Jul 9, 2013 at 18:57
• No it doesn't. At that point I was taking wild guesses. – Jon Chan Commented Jul 9, 2013 at 19:54

1 Answer 1

Use approach 1, but add a $watch:

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

fiddle

I like @Karl's version better:

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