Question

我几个小时后一直面临着一个问题。我的视图模板看起来像 -

<div class="row" ng-repeat="row in CampaignsService.getRows().subItems track by $index">
<div class="col-sm-2">
    <select class="form-control dropDownPercent" ng-model="CampaignsService.dropDownPercent[{{CampaignsService.selectCounter}}]" ng-change="CampaignsService.wow(CampaignsService.dropDownPercent, $index)" ng-options="o as o for o in CampaignsService.showPercentDropDown().values">
    </select>
</div>

<div class="col-sm-2" style="line-height: 32px">
    of visitors send to
</div>

<div class="col-sm-4">
    <select class="form-control" ng-model="campaignSelect" ng-options="campaign.Campaign.id as campaign.Campaign.title for campaign in CampaignsService.getRows().items">
        <option value=""> Please select </option>
    </select>
</div>

<div class="col-sm-4">
    <a class="btn btn-default" target="_blank" href="">Show campaign</a>
</div>

变量CampaignsService.selectCounter是一个计数器变量并在服务中声明，但是当我要使用ng-model="CampaignsService.dropDownPercent[{{CampaignsService.selectCounter}}]"时，它会给我错误 -

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 35 of the expression [CampaignsService.dropDownPercent[{{CampaignsService.selectCounter}}]] starting at [{CampaignsService.selectCounter}}]]

当我使用ng-model="CampaignsService.dropDownPercent['{{CampaignsService.selectCounter}}']"时，它不会给出任何错误，但它会将此变量作为字符串。 我的问题是如何创建一个模型数组并在我的服务中获取模型的数组值？我在堆栈社区中读了很多问题，而且没有一个技巧适合我。我的脚本下的服务是

.service('CampaignsService', ['$rootScope', 'AjaxRequests', function ($rootScope, AjaxRequests) {
                this.dropDownPercent = [];
                this.selectCounter = 0;

                var gareeb = [];
                this.showPercentDefault = 100;

//                    this.campaignsData = [];
                    this.$rowsData = {
                        items: [], //array of objects
                        current: [], //array of objects
                        subItems: [] //array of objects

                    };


                this.getRows = function () {
                    return this.$rowsData;
                }


                this.addNewRow = function () {
                    var wowRow = {}; //add a new object
                    this.getRows().subItems.push(wowRow);
                    this.selectCounter++;
                    gareeb.push(0);
                }

                this.calculatePercentages = function (index) {
                    angular.forEach(this.getRows().current, function (data, key) {
                        if (key == index) {
                            console.log(data);
                        }
                    })
                }

                this.showPercentDropDown = function ($index) {

                    var balle = 0;
                    var start;

                    angular.forEach(gareeb, function (aha, keywa) {
                        balle += aha;
                    })

                    var last = 100 - balle;

                    var final = [];
                    for (start = 0; start <= last; start += 10) {
                        final.push(start);
                    }

                    return this.values = {
                        values: final,
                    };
                }

                this.wow = function (valueWa, keyWa) {
                    console.log(this.dropDownPercent);
                    gareeb[keyWa] = valueWa;
                    this.changePercentDropDown();
                }


                this.changePercentDropDown = function () {
                    var angElement = angular.element(document.querySelector('.dropDownPercent'));
                    angular.forEach(angElement, function (data, key) {
                        console.log(data);
                    })
                }
            }])

目标模型结构应该是

ng-model="CampaignsService.dropDownPercent[1]"
ng-model="CampaignsService.dropDownPercent[2]"
ng-model="CampaignsService.dropDownPercent[3]"

提前非常感谢。

Answer 1

由于您处于Angular表达式的上下文中，因此不需要插值标记{{...}}。所以ngModel指令应如下所示：

ng-model="CampaignsService.dropDownPercent[CampaignsService.selectCounter]"

在控制器的服务中获取模型数组值

1 个答案: