javascript - 无法获取选择元素中的选定元素

Question

我有一个 API，它返回这种格式的 JSON 元素

{
    "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);
        }
    }
});

现在的主要问题是，即使用户从下拉列表中选择任何一个值并单击保存按钮，在控制台日志中我也可以看到其相应的值。

例如，如果用户选择XYZ并单击保存按钮，在控制台日志中我可以看到["xyz","abc"]。但我想要的是用户选择的值，而不是其相应的值。那么有人可以建议如何实现这一目标吗？对于我的程序中的所有其他选择元素，我从 ng-model 获得值(value)，只是不知道为什么这里会出错？

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>