我有像这里的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"
}]
有没有办法做到这一点。任何人请帮助我
答案 0 :(得分: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>
答案 1 :(得分:0)
这是你如何做到的。只需重复列表即可。
也就是说,我建议您阅读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>
答案 2 :(得分:0)
<强>演示强> 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)
答案 3 :(得分:-1)
<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>