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>

Yes. It is possible.

jbrown
– jbrown

2015-12-28 13:01:57 +00:00
Commented Dec 28, 2015 at 13:01 — jbrown
– jbrown, Commented Dec 28, 2015 at 13:01

beaver · Accepted Answer · 2015-12-28 13:56:59Z

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="[email protected]" 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.

Collectives™ on Stack Overflow

populate multiple dropdown select boxes from JSON data in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related