如何实现点击下拉框动态获取下拉列表?
用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>
付费偷看金额在0.1-10元之间
你给你的 下拉列表 来一个最小高度,因为你看你的其实是加载好了。但是因为你的高度不够出现了滚动条。
这个问题我之前也遇到过,我说说我的想法吧。
一周热门 更多>