Привязка повторяемого подмножества формы к модели

В регистрационной форме я разрешаю пользователю вводить ноль или более телефонных номеров. Каждый номер телефона состоит из префикса и номера, это два поля на номер телефона. Пользователь может решить, сколько номеров он хочет предоставить, 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 для этих текстовых входов, чтобы эти объекты генерировались в массиве.

Кроме того, я большой поклонник связывания ссылок и ограничения таких вещей, как наблюдение за областью действия и изменения в области действия на основе событий, так как часто эти изменения остаются незамеченными для других директив, которые могут использовать это значение (если их не наблюдать). По сути, это означает, что я намерен динамически генерировать объекты в массиве, когда форма заполняется числами, или динамически удалять объекты в массиве, когда удаляются числа или оба входа оставлены пустыми.

Массив должен содержать только действительные и заполненные объекты, частично заполненные объекты или пустые объекты не должны добавляться в модель или массив (как обычно это делается со свойствами с недопустимыми значениями - эти свойства удаляются из объекта модели). В основном это толчок к массиву с каждым проверенным объектом и удаление (фрагмент) объектов для каждого недействительного объекта. Но тогда довольно автоматически, вместо написания функции push/slice.

Источник

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>
Источник

Привет, попробуйте этот код:

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

Источник
Другие вопросы по тегам