c3.js的data.groups功能,第一个框选择了data1,第二个输入框下拉列表中过滤掉data1,只出现data2..
框架是基于angularjs,c3.js,lodash,bootstrap
想实现c3.js的data.groups功能,点击一个按钮(‘+’)就会出现一个输入框,有一个下拉列表选择,可以选择data1,data2,data3,。。。。
点击data1前面的勾选,data1选中并且输入框中出现data1.取消勾选,输入框中data1去掉。点击另外一个按钮(‘-’),输入框和下拉列表去掉。
现在的问题想要解决的问题是
1.取消data1前面的勾选,怎么去data1
2.如果第一个输入框选择了data1,data2,第二个书序狂下拉列表中怎么过滤掉data1,data2
,只出现data3,data4...
3.点击按钮(‘-’),去掉输入框和下拉列表消失
<div class="col-sm-12">
<div class="row">
<div class="form-group mbs col-md-3" ng-repeat="group in visItem.config.chart.data.groups">
<label>Data Groups</label>
<input type="text" class="form-control input-sm" placeholder="Data Groups" value="{{group}}">
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Data Groups <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem" ng-repeat="(key,data) in datas">
<label><input type="checkbox" ng-checked="group.indexOf(data)>-1" ng-model="data" ng-change="dataGroups(key,data,group)" />{{key}}</label>
</li>
</ul>
</div>
<button id="newBtn" type="button" class="btn btn-primary btn-xs" ng-click="removeGroup()">
<i class="fa fa-minus"></i>
</button>
</div>
<button id="newBtn" type="button" class="btn btn-primary btn-xs" ng-click="addGroup()">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
//获取表格内容
$scope.datas = angular.copy($scope.visItem.config.chart.data.names);
//console.log($scope.datas);
$scope.addGroup= function() {
$scope.visItem.config.chart.data.groups = $scope.visItem.config.chart.data.groups ? $scope.visItem.config.chart.data.groups : [];
$scope.visItem.config.chart.data.groups.push([]);
}
$scope.removeGroup= function() {
-.remove($scope.visItem.config.chart.data.groups);
}
//将选中的data显示在input里并执行data group功能
$scope.dataGroups = function(key,data,group) {
//如果被选中则将值传入input框里
if(data) {
group.push(key);
}else{
_.remove(group);//删除没被选中的data,不过好像没起作用
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论