從JSON數據中以角度填充多個下拉選擇框

Question

首先，經過無數次搜索后，該問題無法回答我的問題。

我正在使用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 。

這可能嗎？ 如果不是，我該如何在控制器中運行一個函數以分離此數據，以便將JSON數據的每個部分公開給$scope

UPDATE

到目前為止，我已經設法做到這一點：但是不確定如何獲得Title屬性

<div ng-repeat="select in Filters">
    <div ng-dropdown-multiselect="" options="Filters[$index].filters" selected-model="example1model" extra-settings="filterSettings"></div>
</div>

Answer 1

這是一個片段，其中包含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循環中的數據中。

從JSON數據中以角度填充多個下拉選擇框

問題描述

1 個解決方案

解決方案1
2 已采納 2015-12-28 13:56:59

從JSON數據中以角度填充多個下拉選擇框

問題描述

1 個解決方案

解決方案1 2 已采納 2015-12-28 13:56:59

解決方案1
2 已采納 2015-12-28 13:56:59