選択した要素を取得することができません

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> 

であるため、私は、ドロップダウンにそれらの要素を追加する必要があります

そして、私のディレクティブは、今の主な問題は、ユーザーがドロップダウンanから値のいずれかを選択してもです

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

あなたがそうのようなngOptionsディレクティブからselect as構文を使用する必要があります。

<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>