c3.js的data.groups功能,第一个框选择了data1,第二个输入框下拉列表中过滤掉data1,只出现data2..


框架是基于angularjs,c3.js,lodash,bootstrap
想实现c3.js的data.groups功能,点击一个按钮(‘+’)就会出现一个输入框,有一个下拉列表选择,可以选择data1,data2,data3,。。。。
点击data1前面的勾选,data1选中并且输入框中出现data1.取消勾选,输入框中data1去掉。点击另外一个按钮(‘-’),输入框和下拉列表去掉。

clipboard.png
clipboard.png

现在的问题想要解决的问题是
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,不过好像没起作用
       }
    }

lodash web前端开发 HTML angularjs c3.js

六神沐浴露 9 years, 2 months ago

Your Answer