Question

无论何时在页面中添加新行时，都无法弄清楚如何动态添加新模型。例如，输入选择框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>

我当前的控制器有以下内容：

   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"} );
        };


}]);

Answer 1

我想出了我的问题。我的问题是，当添加新的控件行时，我不确定如何生成新对象。我想我应该在fiddleJS上放一些东西来帮助人们更好地想象它。由于使用了静态模型（$ scope.infos）作为ng模型，因此我不想要使用相同的模型用于两个不同的控件。我希望我的所有控件都是独一无二的。

修复是为了创建我想到的对象，如下所示：

$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;

我使用索引来跟踪我所在的对象。

Answer 2

更接近的问答是：

Ng-repeat with dynamic ng-model on input not working

拜托，看看。

将模型推送到数组时动态设置新的ng-model

2 个答案: