Question

我如何更新这些范围

$scope.name = "";
$scope.username = "";

在一个ng-model内？

<input type="text" ng-model="name && username"/>

更新

我正在处理一个棘手的情况，我无法使用函数更新$scope.username，我正在寻找一种方法来通过ng-model属性完成所有这些。

Answer 1

$parsers和$formatters有一种方式。您可以假设您的模型是一个复杂的对象，例如{ name: '...', surname: '...' }，在单个文本框中编辑，例如空格之前的所有内容都是name，第一个空格后面的所有内容都是surname。

示例实现，HTML：

<input ng-model="data.complex" full-name="" />

指令：

app.directive('fullName', function() {
    return {
        restrict: 'A',
        scope: false,
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel) {
            ngModel.$parsers.unshift(function(value) {
                var tmp, result = { name: null, surname: null };
                if( value ) {
                    tmp = value.split(' ');
                    if( tmp ) {
                        if( tmp.length > 0 ) {
                            result.name = tmp.shift();
                        }
                        if( tmp.length > 0 ) {
                            result.surname = tmp.join(' ');
                        }
                    }
                }
                return result;
            });

            ngModel.$formatters.push(function(value) {
                var name, surname;
                if( value ) {
                    name = value.name;
                    surname = value.surname;
                }
                if( typeof name !== 'string' ) {
                    name = '';
                }
                if( typeof surname !== 'string' ) {
                    surname = '';
                }
                return name.length > 0 ? name + ' ' + surname : surname;
            });
        }
    };
});

看一个工作小提琴：http://jsfiddle.net/uL1ors7q/

Answer 2

您可以使用AngularJS watcher来提升其他值：

<input type="text" ng-model="name"/>

在控制器中：

$scope.$watch('name', function(name){
  $scope.username = name;
});

Answer 3

您只能使用ng-model绑定到一个范围属性，但您可以添加ng-change来触发函数以更新另一个

<input type="text" ng-model="name" ng-change="updateUsername()"/>

控制器

$scope.updateUsername = function(){
   $scope.username = $scope.name;
}

对于实时更新，可以切换到ng-keyup

这种方法比使用手表便宜，因为它不需要经常监控，只能按要求点火

Answer 4

为了完整起见，还有一种方法：使用ngModelOptions＆＃39; s getterSetter：

<input ... ng-model="getSetName" ng-model-options="{getterSetter: true}" />

$scope.getSetName = function (name) {
  if (!arguments.length) return $scope.name;
  $scope.name = name;
  $scope.username = name;
};

或更复杂的例子：

<input ... ng-model="user.fullname" ng-model-options="{getterSetter: true}" />

$scope.user = {
  firstname: '...',
  lastname: '...',
  fullname: function (fullname) {
    if (!arguments.length) {
      return ((this.firstname || '') + ' ' + (this.lastname || '')).trim();
    } else {
      var parts = fullname.split(' ');
      this.firstname = parts[0];
      this.lastname = parts[1];
    }
  }
};

另请参阅此 short demo 。

Answer 5

Angular双向数据绑定将为您解决此问题。无需监控变更事件或其他任何事情。

在你的页面中：

<input type="text" ng-model="name" />

在您的控制器中：

$scope.username = $scope.name;

更新ng-model中的两个对象

5 个答案: