极客观点
项目管理
HarmonyOS
如何实现点击下拉框动态获取下拉列表？
用chrome实现时，第一次点击不能立即出现，必须再点一次才能获取到全部列表，如下图：
正常的显示效果：
代码从apiCategory获取已有的列表信息；
从currentCategory中获取当前的Category信息，并使其显示在下拉框；
二者均为当前目录下的json格式文件；
apiCategory格式：
{
"code":"0",
"data":[
{
"category_name":"north",
"category_id":"1"
},
{
"category_name":"south",
"category_id":"2"
},
{
"category_name":"run",
"category_id":"3"
}
]
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>select demo</title>
</head>
<body ng-controller="ctrl">
<label for="Category">Category</label>
<select style="width: 100px" name="Category" ng-model="currentCategory" ng-click="getApiCategory()">
<option ng-repeat="cat in apiCategory" value={{cat.category_id}}>{{cat.category_name}}</option>
</select>
{{currentCategory}}
<script src="../lib/angular.js"></script>
<script>
var myapp=angular.module("myApp",[]);
myapp.controller("ctrl",["$scope","$http",function ($scope,$http) {
$scope.getApiCategory=function () {
$http.get("currentCategory").then(function (response) {
if(response.data.code=="0")
$scope.currentCategory=response.data.data.category_id;
else
alert("Get current category failed!");
})
//若存在，不重复获取
if($scope.apiCategory)
return;
$http.get("apiCategory").then(function (response) {
if (response.data.code == "0")
{
$scope.apiCategory=[];
var len=response.data.data.length;
for(var i=0;i<len;i++)
$scope.apiCategory.push(response.data.data[i]);
console.log($scope.apiCategory);
}
else
alert("Get apiCategory failed!");
})
}
}])
</script>
</body>
</html>
看到这样写有点不爽，怎么不使用ngOptions
然后获取下拉列表的信息你可以一开始就加载呀，不要click之后再加载