Как связать данные json для выпадания в угловых js?

Question

У меня есть JSon массив как здесь

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

Я хочу показать в выберите меню (выпадающие значения, как)

1-pieChart1, 
2-pieChart2, 
3-pieChart3 

Есть ли способ сделать это. любой, пожалуйста, помогите мне

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

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

Answer 3

Это, как вы это делаете. Просто повторите этот список.

Это говорит о том, что я предлагаю вам прочитать документацию по адресу 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 4

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