从角度的JSON数据中填充多个下拉选择框
populate multiple dropdown select boxes from JSON data in angular
首先,经过多次搜索,这个问题并不能回答我的问题。
我正在使用AngularJS Dropdown Multiselect,并希望填充从我的JSON数据中提取的许多下拉列表。该数据的示例如下:
{
"results": [
{
"title": "Difficulty",
"icon": "difficulty-icon",
"filters": [{
"name": "Easy",
"checked": false
}, {
"name": "Medium",
"checked": false
}, {
"name": "Hard",
"checked": false
}, {
"name": "Expert",
"checked": false
}]
},
{
"title": "Direction of Movement",
"icon": "direction-icon",
"filters": [{
"name": "Flexion",
"checked": false
}, {
"name": "Ulnar Deviation",
"checked": false
}, {
"name": "Radial Deviation",
"checked": false
}]
},
{
"title": "Exercise Aim",
"icon": "aim-icon",
"filters": [{
"name": "Power",
"checked": false
}, {
"name": "Strength",
"checked": false
}]
}, {
"title": "Muscle Group ",
"icon": "muscle-icon",
"filters": [{
"name": "Foot & Shin",
"checked": false
}]
},
{
"title": "Joint",
"icon": "joint-icon",
"filters": [{
"name": "Foot and Ankle",
"checked": false
}, {
"name": "Knee",
"checked": false
}]
}
]
}
当这些项目中的任何一个被选中时,我需要将值推送到一个数组中(该数组不是特定于它所来自的下拉列表,因此可以共享相同的模型)。
我想运行一个ng-repeat
,它将创建5个下拉列表,这些下拉列表是用自定义按钮文本从上面的数据中填充的,显示我的JSON数据中的Title
。
这可能吗?如果不是,我如何在控制器中运行函数来分离这些数据,以便向$scope
公开JSON数据的每一部分
更新
到目前为止,我已经设法得到了这个:但不确定如何才能得到Title
属性
<div ng-repeat="select in Filters">
<div ng-dropdown-multiselect="" options="Filters[$index].filters" selected-model="example1model" extra-settings="filterSettings"></div>
</div>
以下是ngRepeat循环中的MultiSelect下拉列表示例:
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller("appController", function($scope) {
$scope.filterSettings = {
displayProp: 'name',
idProp: 'name'
};
$scope.all_data = {
"results": [
{
"title": "Difficulty",
"icon": "difficulty-icon",
"filters": [{
"name": "Easy",
"checked": false
}, {
"name": "Medium",
"checked": false
}, {
"name": "Hard",
"checked": false
}, {
"name": "Expert",
"checked": false
}]
},
{
"title": "Direction of Movement",
"icon": "direction-icon",
"filters": [{
"name": "Flexion",
"checked": false
}, {
"name": "Ulnar Deviation",
"checked": false
}, {
"name": "Radial Deviation",
"checked": false
}]
},
{
"title": "Exercise Aim",
"icon": "aim-icon",
"filters": [{
"name": "Power",
"checked": false
}, {
"name": "Strength",
"checked": false
}]
}, {
"title": "Muscle Group ",
"icon": "muscle-icon",
"filters": [{
"name": "Foot & Shin",
"checked": false
}]
},
{
"title": "Joint",
"icon": "joint-icon",
"filters": [{
"name": "Foot and Ankle",
"checked": false
}, {
"name": "Knee",
"checked": false
}]
}
]
};
angular.forEach($scope.all_data.results, function(item, key) {
item.model = [];
});
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="appController">
<div>
<div ng-repeat="mydata in all_data.results">
<div ng-dropdown-multiselect="" options="mydata.filters" selected-model="mydata.model" extra-settings="filterSettings"></div>
<pre>mydata.model = {{mydata.model | json}}
</pre>
</div>
</div>
</body>
</html>
接收每个多选的用户输入(选择)的模型被添加到Angular.forEach
循环中的数据中。
相关文章:
- 使用“自动选择”填充表单字段
- 使用Web服务根据对另一个下拉框的选择填充第二个下拉框以获取信息
- jqGrid基于先前的选择填充选择选项
- 根据先前的选择填充单个输入 - MYSQL PHP JS
- jQuery 根据第一个选择菜单中的值选择填充第二个选择菜单
- 根据第二个和第一个下拉列表选择填充第三个下拉列表
- Select2使用ajax和php基于第一个(多个)选择填充第二个字段
- PHP从下拉选择填充文本框
- 使.close选择填充来初始化脚本
- Coldfusion使用ajax(第2部分)通过下拉选择填充表单
- Coldfusion使用ajax通过下拉选择填充表单
- 如何基于第一个选择填充第二个选择菜单,基于第二个填充第三个选择菜单-使用Javascript
- 根据下拉选择填充文本字段
- 基于HTML下拉选择填充输入
- jQuery在选择填充其他字段时自动完成
- 根据另一个下拉列表中的选择填充下拉列表
- 根据html中的复选框选择填充文本框
- 根据一个下拉选择填充多个东西
- 使用AJAX根据选择填充表单字段
- Angular js在HTTP响应后选择填充列表