Question

我有像这里的json数组

rawValue

我希望在选择菜单中显示（下拉值等）

$scope.parentChartId = [
{
    "id": 1,
    "chart_name": "pieChart",
    "sub_chart_query_param": "id,part,name"
},
{
    "id": 2,
    "chart_name": "pieChart1",
    "sub_chart_query_param": "id,part,name"
},
{
    "id": 3,
    "chart_name": "pieChart2",
    "sub_chart_query_param": "id,part,name"
}]

有没有办法做到这一点。任何人请帮助我

Answer 1

下拉列表的样式（编辑）

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

你可以像这样打电话

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p ng-repeat="child in parentChartId">{{child.id}}-{{child.chart_name}}</p>
  </div>
</div>

Answer 2

这是你如何做到的。只需重复列表即可。

也就是说，我建议您阅读select上的文档，以便更好地了解正在发生的事情，并为您的问题找到最佳解决方案。

angular.module('app', []).controller('ctrl', function($scope){
  $scope.parentChartId = [
                         {
                           "id": 1,
                           "chart_name": "pieChart",
                           "sub_chart_query_param": "id,part,name"
                         },
                         {
                           "id": 2,
                            "chart_name": "pieChart1",
                            "sub_chart_query_param": "id,part,name"
                         },
                         {
                          "id": 3,
                           "chart_name": "pieChart2",
                           "sub_chart_query_param": "id,part,name"
                         }
                         ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select>
    <option ng-repeat="item in parentChartId" value="{{item.id}}"> {{item.id + "-" + item.chart_name}}</option>  
  </select>
</div>

Answer 3

<强>演示 https://jsfiddle.net/nuwanniroshana/pgyj95pd/

HTML标记

<select ng-options="item as item.id + ' - ' + item.chart_name for item in parentChartId track by item.id" ng-model="selected"></select>

角度实施

(function(angular) {
  angular.module('myApp', [])
    .controller('mainController', function($scope) {

      $scope.parentChartId = [{
        "id": 1,
        "chart_name": "pieChart",
        "sub_chart_query_param": "id,part,name"
      }, {
        "id": 2,
        "chart_name": "pieChart1",
        "sub_chart_query_param": "id,part,name"
      }, {
        "id": 3,
        "chart_name": "pieChart2",
        "sub_chart_query_param": "id,part,name"
      }];
    });

})(window.angular)

Answer 4

<div ng-app="myApp" ng-controller="myCtrl">

<select>
<option data-ng-repeat="p in parentChartId" data-ng-value="{{p.id}}" data-ng-bind="p.id + ' - ' + p.chart_name"></option>
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.parentChartId = [
                         {
                           "id": 1,
                           "chart_name": "pieChart",
                           "sub_chart_query_param": "id,part,name"
                         },
                         {
                           "id": 2,
                            "chart_name": "pieChart1",
                            "sub_chart_query_param": "id,part,name"
                         },
                         {
                          "id": 3,
                           "chart_name": "pieChart2",
                           "sub_chart_query_param": "id,part,name"
                         }
                         ]
});
</script>

如何将json数据绑定到角度js下拉？

4 个答案: