如何绑定json数据以在js下拉列表？

Question

I have json array like here

$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"
}]

I want show in select-menu(drop down values like)

1-pieChart1,
2-pieChart2,
3-pieChart3

Is there any way to do it. any one please help me

Answer 1

Styles for dropdown (edit)

<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>

you can call like this

<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

This is how you do it. Simply repeat over the list.

That said, I will suggest you read documentation on select to get a better picture of what is going on and get the best solution to your problem.

 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

Demo https://jsfiddle.net/nuwanniroshana/pgyj95pd/

HTML markup

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

Angular Implementation

(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>