angularjs - 更新 ng-model 中的两个对象

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

查看工作 fiddle :http://jsfiddle.net/uL1ors7q/