populate multiple dropdown select boxes from JSON data in angular
Question
Firstly, after numerous searches this question does not answer my issue.
I am using AngularJS Dropdown Multiselect and wish to populate a number of dropdowns that are extracted from my JSON data. An example of this data is below:
{
"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
}]
}
]
}
When any of these items are selected I need to push the value to an array (the array is not specific to the dropdown it has come from therefore can share the same model).
I would like to run an ng-repeat that will create 5 dropdowns that are populated from the data above with the custom button text displaying the Title from my JSON data.
Is this possible? If not how can I run a function in my controller in order to seporate this data in order to expose each section of JSON data to the $scope
UPDATE
So far I have managed to get this: however unsure how I can get the Title property
<div ng-repeat="select in Filters">
<div ng-dropdown-multiselect="" options="Filters[$index].filters" selected-model="example1model" extra-settings="filterSettings"></div>
</div>
1 answers
solution1
2 ACCPTED 2015-12-28 13:56:59
Here is a snippet with an example of MultiSelect dropdown in a ngRepeat loop:
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>
The models which receive user input (selection) for each multiselect is added to data in the Angular.forEach loop.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.