我刚刚开始使用 Angular JS 将我的模型绑定到多个输入字段。我的模型包含一个电话号码,格式为单个字符串:“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>
但是,我无法为每个输入字段创建与电话字符串部分的双向绑定。我已经尝试了两种不同的方法:
方法一
---- 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>