在AngularJS中，使用选择器填充下拉选项。

16 浏览
0 Comments

在AngularJS中，使用选择器填充下拉选项。

点击时如何动态填充下拉菜单中的选项。\n我想在点击选择框时从后端获取一些数据。\n

`ng-options="type.shorthand as type.name for type in allTypes"`

\n当我点击选择框以列出下拉菜单时，我希望将值存储在allTypes中。

0

2 答案

0 Comments

在AngularJS中，有时需要在选择下拉选项时动态填充下拉选项。这篇文章将介绍出现这个问题的原因以及解决方法。

在控制器中，我们定义了一个变量$scope.dropDownVals，并调用了一个名为getDataForDropDown()的函数。在页面加载时，我们可以从控制器中调用一个工厂/服务函数，该函数向服务器端发送HTTP请求以获取JSON对象响应，然后将其赋值给$scope.dropDownVals变量。

具体的解决方法如下所示：

在控制器中，我们定义一个变量$scope.dropDownVals，并调用一个名为getDataForDropDown()的函数，该函数用于获取下拉选项的数据。

在服务/工厂函数中，我们发送一个HTTP GET请求到服务器端的代码，并使用.then()方法处理返回的数据。在处理函数中，我们将服务器返回的数据中的requiredField字段赋值给$scope.dropDownVals变量。

以下是完整的代码示例：

// 在控制器中定义变量和函数

$scope.dropDownVals = "";

getDataForDropDown();

// 在页面加载时调用的函数

function getDataForDropDown() {

// 发送HTTP请求到服务器端的代码

$http.get('/api/dropdown')

.then(function(response) {

// 处理返回的数据

$scope.dropDownVals = response.data.requiredField;

});

}

通过上述代码，我们可以在选择下拉选项时动态填充下拉选项。

谢谢阅读！

0
0 Comments

问题的原因是在选择下拉选项时，需要在前端预先获取下拉选项的值。解决方法是在控制器中定义一个函数fetchTypes，并在函数中使用$http服务来获取下拉选项的值，并将获取到的值赋给$scope.allTypes变量。接下来，在HTML中使用ng-init指令来调用fetchTypes函数，从而在页面加载时获取下拉选项的值。最后，在ng-options中使用allTypes变量来渲染下拉选项。

下面是完整的代码示例：

HTML：

<select ng-model="yourFormModel.yourAttributeName" 
        ng-options="type.shorthand as type.name for type in allTypes" 
        ng-init="fetchTypes()"></select>

Controller：

$scope.fetchTypes = function(){
   $http.get('/path/to/types')
        .then(function(data){
             $scope.allTypes = data;
         });
}

以上就是使用AngularJS在选择下拉选项时，动态获取下拉选项值的方法。

0