각도 JS. 반복 가능 선택 지시문에서 ng-model을 올바르게 설정하십시오.

Question

AngularJS를 시작했습니다. 옵션을 채우기 위해 서버 측 작업을 일부 수행해야하기 때문에이 컨트롤러와 지시문을 사용하여 선택 양식 항목을 반복했습니다. 여기

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

각 드롭 다운의 스크립트에 갔지을 수행하는 컨트롤러, 그리고 지침 :

여기

$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입니다 여기

는 HTML의 지침입니다 내 스크립트에서 돌아와 선택 항목을 채 웁니다.

{ 
    "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에서 "name"을 가져 왔지만 지시어 템플릿에 넣을 때마다 오류가 발생합니다. 또한 JSON의 "value"와 "key"의 텍스트에서 선택 옵션 값을 가져오고 싶습니다. 나는 "키"가 있어야하지만 값은 배열의 해당 항목의 순서 (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>' 
       }; 
     });