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

以下是我从脚本中回来填充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成为＆＃34; name＆＃34;来自JSON，但每次我将它放入指令模板时都会出错。我也想要选择的选项＆＃39;价值来自JSON＆＃34;价值＆＃34;以及＆＃34; key＆＃34;中的文字。我有＆＃34;键＆＃34;它应该在哪里，但值只是数组中该项的顺序（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>'
              };
        });

Angular JS。在可重复的select指令上正确设置ng-model

1 个答案: