沒能獲得所選元素選擇元素

Question

我已經在這個格式返回一個JSON元素的API

{ 
    "XYZ": ["xyz","abc"], 
    "ABC": ["cde","abc"], 
    "CDE": ["bla","blla"] 
} 

我要補充這些元素在下拉列表中，爲HTML代碼

<select class="ui search dropdown selection" ng-options="v for (v,k) in <API returns JSon>" style ="select:invalid { color: gray; }" ng-model="xyz"> 
    <option value="" disabled selected hidden>Select Element</option> 
</select> 
<button type="button" class="btn btn-primary" ng-click='saveData(xyz)'>Save</button> 

我的指令是

angular.module('member').directive('memberDirective',function(){ 
    templateUrl: "../../XYZ/xyz.html", 
    controller: 'appConttroller', 
    link: function($scope){ 
     $scope.saveData = function(data){ 
      console.log(data); 
     } 
    } 
}); 

現在主要的問題是，即使用戶選擇從下拉列表中的數值的任何一個d點擊保存按鈕，在控制檯日誌中我可以看到其相應的值。

像例如，如果用戶選擇XYZ，然後點擊保存按鈕，在控制檯日誌中我可以看到[ 「XYZ」， 「ABC」]。但是，無論用戶選擇什麼，我都想要價值，而不是相應的價值。 所以任何人都可以提出如何實現這個目標？對於我的程序中的所有其他select元素，我只能從ng-model得到值，但不知道爲什麼這裏出錯了？

Answer 1

您應該使用select as語法從ngOptions指令，像這樣：

<select class="ui search dropdown selection" ng-options="v as v for (v,k) in json" style ="select:invalid { color: gray; }" ng-model="xyz"> 
    <option value="" disabled selected hidden >Select Element</option> 
</select> 

(function() { 
 

 
    angular.module('MyApp', []) 
 
    .controller('MyController', MyController); 
 

 
    MyController.$inject = ['$scope'] 
 

 
    function MyController($scope) { 
 

 
    $scope.json = { 
 
     "XYZ": ["xyz", "abc"], 
 
     "ABC": ["cde", "abc"], 
 
     "CDE": ["bla", "blla"] 
 
    } 
 
    
 
    $scope.saveData=function(data){ 
 
     console.log(data); 
 
    } 
 

 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="MyApp"> 
 

 
    <div ng-controller="MyController"> 
 

 

 
    <select class="ui search dropdown selection" ng-options="v as v for (v,k) in json" style="select:invalid { color: gray; }" ng-model="xyz"> 
 
     <option value="" disabled selected hidden>Select Element</option> 
 
    </select> 
 
    
 
    <p>Value of ngModel: {{xyz}}</p> 
 
    
 
    <button type="button" class="btn btn-primary" ng-click='saveData(xyz)'>Save</button> 
 

 

 
    </div> 
 

 

 
</div>