Получить значения массива модели в службе контроллера

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

Поскольку вы находитесь в контексте углового выражения, вам не нужны теги интерполяции {{...}}. Так директива ngModel должна выглядеть следующим образом:

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