Angularjs 将可重复表单子集绑定到模型_Angularjs_Angularjs Model

Angularjs 将可重复表单子集绑定到模型

angularjs

Angularjs 将可重复表单子集绑定到模型,angularjs,angularjs-model,Angularjs,Angularjs Model,在登记表上，我允许用户输入零个或多个电话号码。每个电话号码由前缀和号码组成，每个电话号码有两个字段。用户可以决定要提供多少号码，“添加更多号码”链接将克隆表单的这一部分 Prefix: [_______] Number: [_______] + add more numbers 我绑定到的模型是固定的，应该是以下格式： $scope.model = { "...main inputs": "username, etc...", phoneNumbers: [ /

在登记表上，我允许用户输入零个或多个电话号码。每个电话号码由前缀和号码组成，每个电话号码有两个字段。用户可以决定要提供多少号码，“添加更多号码”链接将克隆表单的这一部分

Prefix: [_______]
Number: [_______]
+ add more numbers

我绑定到的模型是固定的，应该是以下格式：

$scope.model = {
    "...main inputs": "username, etc...",
    phoneNumbers: [
        // for each phone number I expect this object
        { "prefix": "+1", "number": "123123123" }
    ]
};

我不确定应该如何为这些文本输入设置ng模型，以便在数组中生成这些对象

此外，我非常喜欢引用绑定，并限制范围监视和基于事件的范围更改，因为这些更改通常不会被其他可能使用此值的指令注意到，除非被监视。基本上，这意味着我的意图是在表单中填充数字时动态生成数组中的对象，或者在删除数字或两个输入都为空时动态删除数组中的对象

数组应仅包含有效和填充的对象，不应将部分填充的对象或空对象添加到模型或数组中，这与通常对具有无效值的属性所做的操作相同-这些属性将从模型对象中删除。基本上是对每个已验证对象的数组进行推送，并删除每个无效对象的对象切片。而是自动地，而不是编写推送/切片函数

您好，请尝试以下代码：

Html:

您好，请在

中查看此演示，使用以下代码

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app ng-controller="todoCtrl">

                <form name="form" ng-submit="addmore()">
                    <div class="form-group">
                        <label for="inputFirstName">Prefix</label>
                        <input class="form-control" type="text" ng-model="phone_prefix"/>
                    </div>
                    <div class="form-group">
                        <label for="inputLastName">Phone number</label>
                        <input class="form-control" type="text" ng-model="phone_Number"/>
                    </div>  

                    <div class="form-group">
                            <input type="submit" class="btn btn-primary" value="Add more number"/>
                    </div>                  
                </form>   

                <div ng-repeat="phone in phoneNumberArray">
                     {{ phone.prefix + " "+ phone.phoneNumber}}
                </div>  


<script>

function todoCtrl($scope) {
debugger;
    $scope.phoneNumberArray = [
    {prefix: '14', phoneNumber:'123'}
    ];

    $scope.addmore = function () {
        $scope.phoneNumberArray.push(
        {prefix: $scope.phone_prefix, phoneNumber: $scope.phone_Number}
        );
    }
    }
</script>

</body>
</html>

您现在可以获取它吗？…这可以工作，但如果字段为空，则将使用空或无值对象填充数组。我认为您的问题值对象将推入另一个正确的数组中。数组应仅包含有效对象。如果有三个表单子集是开放的，但只有一个子集是有效的，则数组长度应为1，其中包含一个有效对象。

    $scope.phoneNumberArray = [
    {
        prefix: "",
        phoneNumber:"",
    }];

    $scope.addmore = function () {
        $scope.phoneNumberArray.push({
            prefix: "",
            phoneNumber: "",
        });
    }

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app ng-controller="todoCtrl">

                <form name="form" ng-submit="addmore()">
                    <div class="form-group">
                        <label for="inputFirstName">Prefix</label>
                        <input class="form-control" type="text" ng-model="phone_prefix"/>
                    </div>
                    <div class="form-group">
                        <label for="inputLastName">Phone number</label>
                        <input class="form-control" type="text" ng-model="phone_Number"/>
                    </div>  

                    <div class="form-group">
                            <input type="submit" class="btn btn-primary" value="Add more number"/>
                    </div>                  
                </form>   

                <div ng-repeat="phone in phoneNumberArray">
                     {{ phone.prefix + " "+ phone.phoneNumber}}
                </div>  


<script>

function todoCtrl($scope) {
debugger;
    $scope.phoneNumberArray = [
    {prefix: '14', phoneNumber:'123'}
    ];

    $scope.addmore = function () {
        $scope.phoneNumberArray.push(
        {prefix: $scope.phone_prefix, phoneNumber: $scope.phone_Number}
        );
    }
    }
</script>

</body>
</html>