How do I use part of a string for one model in Angular?

Question

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>

Does that 2nd approach even work?

kentcdodds
– kentcdodds

2013-07-09 18:57:06 +00:00
Commented Jul 9, 2013 at 18:57 — kentcdodds
– kentcdodds, Commented Jul 9, 2013 at 18:57
No it doesn't. At that point I was taking wild guesses.

Jon Chan
– Jon Chan

2013-07-09 19:54:41 +00:00
Commented Jul 9, 2013 at 19:54 — Jon Chan
– Jon Chan, Commented Jul 9, 2013 at 19:54

Mark Rajcok · Accepted Answer · 2013-07-09 23:15:48Z

7

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; }
);

edited Jul 9, 2013 at 23:15

answered Jul 9, 2013 at 18:57

Mark Rajcok

365k114 gold badges501 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Chan Over a year ago

This worked perfectly - thank you! Any suggestions for understanding this in depth (I've looked at the documentation, but it's hard to digest)?

Karen Zilles Over a year ago

$watch takes two arguments.. the first is what to watch (either a function or a string with an angular expression) and the second is a function that gets called when the thing you're watching changes. In his example he's watching the string concatenation of the three parts. The first argument to the action function is the new value of the watch expression (the parts concatenated), so he just assigns the main variable to this new value. He could have also written $scope.$watch('phone1+phone2+phone3', function(value) { $scope.phone = value; }

Collectives™ on Stack Overflow

How do I use part of a string for one model in Angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related