Угловой JS. правильно установить ng-модель в повторяемой директиве выбора

Только начал изучать AngularJS. Я написал этот контроллер и директиву для повторения элемента формы выбора, потому что мне нужно выполнить некоторую работу на стороне сервера, чтобы заполнить его параметры.

Вот директива в HTML:

<form-dropdown ng-init="getDropdown('category')" class="form-control"></form-dropdown>

Вот контроллер, который выполняет .get для скрипта для каждого раскрывающегося списка, и директива:

$scope.getDropdown = function(query) {
        $http.get('assets/php/get_dropdown.php?op='+query)
        .success(function(data, status) {
                    $scope.select = data;
        });
};

myFormElementApp.directive('formDropdown', function() {
          return {
                restrict: 'E',
                scope: true,
                replace: true,
                template: '<select id="{{select.name}}" name="{{select.name}}" ng-options="template.key for template in select.items"></select>'
          };
    });

Вот JSON, который я получаю из своего скрипта для заполнения выбора:

{
    "name":"category",
    "items":[
         {"key":"Choose Category","value":""},
         {"key":"Shirts","value":"shirts"},
         {"key":"Pants","value":"pants"},
         {"key":"Shoes","value":"shoes"},
         {"key":"Accessories","value":"accs"},
         {"key":"Cosmetics","value":"cosmetics"},   
         {"key":"Gift cards","value":"giftcards"}
    ]
}

Я хочу, чтобы ng-модель была «именем» из JSON, но я получаю сообщение об ошибке каждый раз, когда помещаю его в шаблон директивы. Я также хочу, чтобы значение параметров выбора исходило из «значения» JSON и текста из «ключа». У меня есть "ключ", где он должен быть, но значения - это просто порядок этого элемента в массиве (0, 1, 2 и т. д.), и у меня есть один из них в качестве первого элемента каждого выбора:

<option value="?" selected="selected"></option>

Я читал в другом месте, что причина этого в том, что моя модель настроена неправильно. Как мне переписать свой контроллер или директиву, чтобы я мог правильно настроить ng-модель?


angularjs angularjs-directive angularjs-ng-model angularjs-controller
person aooawnewkn    schedule 15.09.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

я думаю должно работать

$scope.getDropdown = function(query) {
        $http.get('assets/php/get_dropdown.php?op='+query)
        .success(function(data, status) {
                    $scope.select = data;
$scope.dropValue = data.items[0];
        });
};


myFormElementApp.directive('formDropdown', function() {
          return {
                restrict: 'E',
                scope: true,
                replace: true,
                template: '<select id="{{select.name}}" name="{{select.name}}"
 ng-options="template.key for template in select.items track by template.key" ng-model="dropValue"></select>'
              };
        });
person Narek Mamikonyan    schedule 15.09.2014
comment
Спасибо за это. Он удаляет странную первую опцию, но мне все еще нужно правильно установить значения. - person aooawnewkn; 15.09.2014
comment
какое свойство вы хотите установить в качестве значения? - person Narek Mamikonyan; 15.09.2014
comment
Я хочу, чтобы у параметров было значение JSON item.value. Например: <option value="{{item.value}}">{{item.key}}</option> Должен ли я вместо этого использовать ng-repeat? Наверное, избавляет от головной боли. И могу ли я установить ng-модель в качестве имени данных вместо dropValue, сохранив при этом эту функцию? - person aooawnewkn; 15.09.2014
comment
Я переключил ng-options на template.key for template in select.items track by template.value, и это сработало! Спасибо за вашу помощь! - person aooawnewkn; 15.09.2014
comment
если у вас нет других проблем, пожалуйста, также проголосуйте за мой ответ :) заранее спасибо! - person Narek Mamikonyan; 15.09.2014
comment
Сделаю, как только наберу 15 репутации! - person aooawnewkn; 15.09.2014