ngИзменить работу с массивом объектов

Question

Я борюсь с angularJS, чтобы сделать выбор с помощью опции ngRepeat. я выбрал этот путь, потому что данные, которые я получаю это:

{ 
"id": "day-pro", 
"data": [ 
     { "countries": [ "FRANCE", "SPAIN","GERMANY"] }, 
     { "country": "FRANCE", 
     "achieved": [ 4, 12, 23, 24, 24, 27, 35, 41 ], 
     "target": [ 56, 72, 79, 89, 92, 99, 100, 100 ] 
     } ]} 

и шаблон директивы я использую это:

<div ng-controller="hBarController"> 
    <select id="sel-day-pro" class="frm-drop" data-ng-change="selectCountry($event)"> 
     <option data-ng-repeat="opt in Countries">{{opt}}</option> 
    </select> 
<div class="daily-progress-chart">Select a country</div> 

В daily-progress-chart DIV будет диаграмма нарисованный при отборе.

Ошибка, которую я имею в том, что директива требует ngModel, но вставляя ее в запрос: «^ ngModel» не решит ее.

Угловая директива здесь:

App.directive('myFrmContent', function() { 
    return { 
     restrict: "E", 
     require: '^ngModel', 
     template: "<div ng-include=\"getTemplateUrl()\"></div>", 
     controller: function ($scope) { 
      $scope.getTemplateUrl = function() { 
       var btnID = ''; 
       if ($scope && $scope.widget && $scope.widget.id) { 
        btnID = $scope.widget.id; 
       } 
       return "htmlTemplates/" + btnID + ".html" || ''; 
      }; 
     } 
    }; 
}); 

Answer 1

Вы фактически missunderstood ошибки:

директивы, которые требуют ng-model является ng-change.

Примечание: Использование ng-model (ng-model="selectedCountry" для Exemple) на выбор будет автоматически обновлять вар (selectedCountry) к фактической value (или ng-value) опциона.

ng-change - это директива, которая вызывает какое-либо действие при изменении переменной ng-model. Именно поэтому он требует ng-model директивы

Вы должны, вероятно, в конечную итоге с чем-то вроде этого:

<div ng-controller="hBarController"> 
    <select id="sel-day-pro" ng-model="selectedCountry" class="frm-drop" data-ng-change="handleChangeSelectedCountry()"> 
     <option ng-value="opt" data-ng-repeat="opt in Countries">{{opt}}</option> 
    </select> 
<div class="daily-progress-chart">Select a country</div> 

И в контроллере:

$scope.handleChangeSelectedCountry = function(){ 
    //Do something you want to do on each change of the selectedCountry value 
    //Do NOT manually set the value of selectedCountry 
} 

Надеется, что это помогло.

EDIT: Вот plunker и чистое решение

Я пришел с этим:

<select data-ng-model="selectedCountry" 
     data-ng-options="country for country in data.data[0].countries" 
     id="sel-day-pro" class="frm-drop"> 
</select> 
<div>Currently selected {{selectedCountry}}</div> 

При отсутствии JS в контроллере.

Если вам нужно обработать что-то другое, чем установить параметр var (selectedCountry), следуйте моим советам в ответе и используйте ng-change для обработки вашего необходимого поведения.

PS: Обратите внимание, что фактическое JSON заставляет меня сделать это data.data[0].countries вместо этого data.data.countries