我有一个 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),只是不知道为什么这里会出错?
最佳答案
您应该使用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>
关于javascript - 无法获取选择元素中的选定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39355665/