Динамическая установка новой ng-модели при отправке модели в массив

Не могу понять, как динамически добавлять новую модель всякий раз, когда на страницу добавляется новая строка. Например, поле выбора ввода ng-model= infos.rigBonusInfo.rigName используется для всех полей выбора, которые я добавил на страницу. Я хотел бы, чтобы к каждому выбранному входу была привязана другая модель. Я пытался использовать ng-model= infos.rigBonusInfo.rigName[rigBonus], но это не работает для ставок, так как одна и та же модель прикрепляется к каждому полю ставок.

Практически то, что я хочу сделать, это привязать новую модель всякий раз, когда новая строка помещается в массив.

В настоящее время у меня есть вложенная таблица, которая выглядит следующим образом:

<div class="col-lg-5">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Rig</th>
                <th>Rig Name</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat="rig in rigs">
                <td>{{ $index + 1 }}</td>
                <td>{{ rig.name }}</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="col-lg-2"></div>

<div class="col-lg-5">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Bonus Name</th>
                <th>Rate</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="bonus in create.rigBonusRates">
                <td>{{ bonus.rateName }}</td>
                <td>{{ bonus.rate }}</td>
            </tr>
        </tbody>
    </table>
</div>

<table>       
    <thead>
        <tr>
            <th>Date</th>
        </tr>
    </thead>
        <tbody>
            <tr ng-repeat="rigDate in rigDateList track by $index">
                <td><input ui-date="datepickerOptions" ng-model="date" /></td>
                <td>
                    <table>
                        <thead>
                            <tr>
                                <th>Rig</th>
                                <th>Rate1</th>
                                <th></th>
                                <th>Rate2</th>
                                <th></th>
                                <th>Rate3</th>
                                <th></th>
                                <th>Rate4</th>
                                <th></th>
                                <th>Comments</th>
                            </tr>
                        </thead>
                        <tr ng-repeat="rigBonus in rigBonusList track by $index">
                            <td><select ng-options="rig as rigs.indexOf(rig) + 1 for rig in rigs" ng-model="infos.rigBonusInfo.rigName[rigBonus]" ></select></td>
                            @for (var i = 1; i < 5; i++)
                            {
                                <td><select ng-options="rigBonus.rateName for rigBonus in create.rigBonusRates" ng-model="infos.rigBonusInfo.rate@(@i)"></select></td>
                                <td><input type="text" ng-disabled="infos.rigBonusInfo.rate@(@i).rateName != 'Special' " ng-model=infos.rigBonusInfo.rate@(@i).rate /></td>
                            }

                          <td><input ng-model="info.rigBonusInfo.comments" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
</table> 

<div>
    <button type="button" ng-click="add()">Add</button>
    <button type="button" ng-click="addDate()">Add Date</button>
</div>

My current controller has the following:

   angular.module('RigBonus').controller('rigCreateController', ['$scope', '$http', 'PayPeriodService', 'RigLegendService',
    function ($scope, $http, PayPeriodService, RigLegendService, RigBonusRateService) {

        $scope.rigs = RigLegendService.getRigLegend();

        $scope.datepickerOptions = {
            orientation: 'top',
            startDate: PayPeriodService.getStartDate(),
            endDate: PayPeriodService.getEndDate()
        };


        $http({ method: 'GET', url: '/Home/CreateData' }).success(function (data) {
            $scope.create = data;

            $scope.infos = {
                rigBonusInfo: {
                    rigName: $scope.rigs[0],
                    rate1: $scope.create.rigBonusRates[0],
                    rate2: $scope.create.rigBonusRates[0],
                    rate3: $scope.create.rigBonusRates[0],
                    rate4: $scope.create.rigBonusRates[0],
                    comment: ""
                }
            };

            $scope.add = function () {
                $scope.rigBonusList.push();
            };

            $scope.addDate = function(){
                $scope.rigDateList.push("");
            };

        });

        $scope.rigBonusList = [$scope.rigBonusInfo];
        $scope.rigDateList = [];

        $scope.submit = function () {
            $http.post('/Home/Create', {model: "testing"} );
        };


}]);

person Zelgadisan    schedule 20.07.2015    source источник
comment
используйте ng-submit (yourmodel), и в этой функции вы отправляете свои данные в свою область   -  person ThomasP1988    schedule 21.07.2015


Ответы (2)


Я понял свою проблему. Моя проблема заключалась в том, что я не знал, как создать новый объект при добавлении новой строки элементов управления. Думаю, мне стоило добавить что-то в fiddleJS, чтобы люди могли лучше его визуализировать. Поскольку в качестве ng-модели использовалась статическая модель ($scope.infos), одна и та же модель использовалась для двух разных элементов управления, которые мне не нужны. Я хочу, чтобы все мои элементы управления были уникальными.

Исправление заключалось в создании объекта, который я имел в виду, а именно:

$scope.rigDateList = [{
        date: "",
        rigBonusList: [{}]
    }];

Итак, это массив объектов, где объект содержит дату и другой массив объектов.

Когда я хочу поместить новые объекты во внутренний массив, о котором я не знал, я мог просто создать такие объекты в то время. Я пытался найти способ динамически создавать новые модели, которые ng-model мог бы объявить в контроллере. Я использую следующую функцию:

 $scope.rigDateList[$scope.rigListIndex].rigBonusList.push({
                        rigName: "",
                        rate1: "",
                        rate2: "",
                        rate3: "",
                        comments: ""
                    });

Я также не знал, что могу использовать элементы внутри массива из ng-repeat. В следующем случае вместо информационной модели я мог бы использовать rigBonus.

<tr ng-repeat="rigBonus in rigDate.rigBonusList track by $index">
                                <td><select ng-options="rig as rigs.indexOf(rig) + 1 for rig in rigs" ng-model="rigBonus.rigName"></select></td>

и когда я хочу нажать на внешний массив, я использую следующее:

     $scope.rigDateList.push({
                            date: "",
                            rigBonusList: [""]
                        });

$scope.rigListIndex = $scope.rigListIndex + 1;

Я использую индекс, чтобы отслеживать, в каком объекте я нахожусь.

person Zelgadisan    schedule 23.07.2015

Более близкий вопрос и ответ таковы:

Ng-repeat с динамической ng-моделью при вводе не работает

взгляни, пожалуйста.

person Joao Polo    schedule 22.07.2015