0

在注册表单上，我允许用户输入零个或多个电话号码。每个电话号码由一个前缀和一个号码组成，这是每个电话号码的两个字段。用户可以决定他想提供多少个数字，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这些文本输入以在数组中生成这些对象。

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

数组应该只包含有效和填充的对象，不应该将部分填充的对象或空对象添加到模型或数组中（就像通常对具有无效值的属性所做的那样——这些属性会从模型对象中删除）。基本上将每个经过验证的对象推送到数组，并为每个无效对象删除（切片）对象。但随后相当自动，而不是编写推送/切片函数。

4

2 回答 2

0

嗨试试这段代码：

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中查看这个演示

于 2014-08-13T12:33:11.937 回答
0

使用以下代码......

<!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>
于 2014-11-17T04:15:23.443 回答