Question

首先，经过大量搜索后，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

更新

到目前为止，我已设法得到这个：但不确定如何获得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 个答案: