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

Question

无法弄清楚每当向页面添加新行时如何动态添加新模型。例如，输入 select 框 ng-model= infos.rigBonusInfo.rigName 用于我添加到页面的所有 select 框。我想在每个 select 输入上附加一个不同的模型。我尝试使用 ng-model= infos.rigBonusInfo.rigName[rigBonus] 但它不适用于费率，因为同一模型附加到每个费率字段。

几乎我想做的是每当新行被推入数组时绑定一个新模型。

目前，我有一个嵌套的 table 如下：

<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

更接近的问答是：

请看一下

Answer 2

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

解决方法是创建我想要的对象，如下所示：

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

所以它是一个对象数组，其中对象包含一个日期和另一个对象数组。

当我想将新对象推送到我不知道的内部数组时，我当时只能创建这样的对象。我试图找出一种方法来动态创建新模型 ng-model 可以通过在控制器中声明它们来实现。我使用以下函数：

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

我也不知道我可以使用 ng-repeat 中数组中的元素。在以下情况下，我可以将 rigBonus 用作模型而不是 infos 模型。

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

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

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

Dynamically setting new ng-model when pushing model to array

angularjs

ng-repeat

angular-ngmodel