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

时间:2014-09-15 06:35:15

标签: angularjs angularjs-directive angularjs-controller angularjs-ng-model

刚开始学习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?

1 个答案:

答案 0 :(得分:2)

我认为应该有效

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