角 JS。在可重复的选择指令上正确设置 ng-model

Question

刚开始学习 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-model 成为 JSON 中的“名称”，但每次将其放入指令模板时都会出错。我还希望选择选项的值来自 JSON 的“值”和来自“键”的文本。我有它应该在的“键”，但值只是数组中该项目的顺序（0、1、2等），我将其中一个作为每个选择的第一个元素：

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

我在其他地方读到过这种情况发生的原因是因为我的模型设置不正确。我应该如何重写我的控制器或指令，以便我可以正确设置 ng-model？

Answer 1

我觉得应该可以

$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>'
              };
        });