刚开始学习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?
答案 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>'
};
});