Question

在注册表格中，我允许用户输入零个或多个电话号码。每个电话号码由前缀和号码组成，这些是每个电话号码两个字段。用户可以决定他想要提供多少个号码，add more numbers链接将克隆表单的这一部分。

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-model以在数组中生成这些对象。

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

数组应仅包含有效和填充的对象，不应将部分填充的对象或空对象添加到模型或数组中（通常使用具有无效值的属性 - 这些属性将从模型对象中删除）。基本上是使用每个经过验证的对象推送到数组，并为每个无效对象移除（切片）对象。但后来相当自动，而不是写一个推/切片功能。

Answer 1

您好试用这段代码：

HTML：

 <form name="form">
                 <div data-ng-repeat="phone in phoneNumberArray">
                    <div class="form-group">
                        <label for="inputFirstName">Prefix</label>
                        <input id="prefix" class="form-control" type="text" ng-model="phone.prefix">
                    </div>
                    <div class="form-group">
                        <label for="inputLastName">Phone number</label>
                        <input id="phoneNumber" class="form-control" type="text" ng-model="phone.phoneNumber">
                    </div>   
                     </div>                                          
                </form>    
             <div class="form-group">
                        <input type="submit" class="btn btn-primary" value="Add more number" data-ng-click="addmore()"/>
              </div>

控制器：

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

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

您好在Fiddle

中查看此演示

Answer 2

使用以下代码.....

<!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>

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

2 个答案: