如何通过选择复选框来选择多个值并在文本字段中显示结果？

Question

我正在使用kendo treeview 和AngularJS 从REST 服务获取数据。我希望能够选中多个复选框并将它们显示在输入字段中。

这是我目前所拥有的：

HTML：

<div class="form-group col-md-6 fieldHeight">
        <label for="legEnty" class="col-md-4 required">Legal
            Entity(s):</label>
        <div id="multiDropDownDiv" class="dropdown col-md-8">
            <input type="text" class="form-control" id="legalEnty"
                ng-readonly="readOnly" ng-model="nonPersistentProcess.legalEnty"
                data-toggle="dropdown" data-target="#" placeholder="LegalEntity"
                ng-maxlength=100 required ng-click="showLegalEntityTreeView = {display: 'block'}"
                data-required-msg="Legal Entity is required" name="legalEnty">
            <div ng-style="showLegalEntityTreeView" class="dropdown-menu multi-level"
                style="width: auto; margin-left: 15px; min-width: 300px; max-height: 500px;">
                <div kendo-tree-view="treeWidget" id="treeViewLegalEnty"
                    style="max-height: 500px;"
                    k-options="treeOptions"
                    k-data-source="legalEntiryOptionsDataSource"
                    k-template="itemLegEntyTemplate"></div>
            </div>
        </div>
    </div>

Controller.js

$scope.treeOptions = {
 checkboxes: true,
 };
 $scope.$on("kendoWidgetCreated", function(event, widget){
        if (widget === $scope.treeWidget) {
            widget.element.find(".k-checkbox input:checked").each(function(){
                widget.expand( $(this).parents(".k-item") );
            });
        }
        $scope.onRightClick = function(e) {
          var node = e.target;
          $scope.treeWidget = $scope.nonPersistentProcess.legalEnty
          $scope.treeWidget.select(node);
          $scope.selectedItem = $scope.treeWidget.dataItem(node);
        } 
    });
    var legalEntiryOptionsDataSource; 
    legalEtityTreeOptions = TreeViewData 
    .query( {
        id :'LEGAL_ENTITY' 
            }, function() { 
                $scope.legalEntiryOptionsDataSource = new kendo.data.HierarchicalDataSource( { 
                    data :legalEtityTreeOptions 
                    }); 
            });
      $scope.itemLegEntyTemplate = '<a ng-click="selectLeglEntyTree(this)" class="no-style">{{dataItem.text}}</a>';     
      $scope.selectLeglEntyTree = function (object){
      $scope.nonPersistentProcess.legalEnty = object.dataItem.text;
      $scope.processDTO.legalEnty = object.dataItem.id;
      $scope.showLegalEntityTreeView = {display: 'none'};
    }

Answer 1

我将尝试回答，但不保证它会起作用。

看看这个plunker：http://plnkr.co/edit/yDNF85J7XiVAlFT9z0uK?p=info

看来你需要做类似的事情

$scope.treeOptions = {
  checkboxes: {
    checkChildren: true
  },
  dataBound: function(e) {
    $scope.attachChangeEvent(e);

  }

};

显然适合您自己的参数。

但是你可以创建一个函数：

$scope.attachChangeEvent = function(e) {

  var dataSource = e.sender.dataSource;
  // issue : change event is getting called multiple times for every click on checkbox
  dataSource.bind("change", function(e) {
    var selectedNodes = 0;

    var checkedNodes = [];

    $scope.checkedNodeIds(dataSource.view(), checkedNodes);


    for (var i = 0; i < checkedNodes.length; i++) {
      var nd = checkedNodes[i];
      if (nd.checked) {
        selectedNodes++;
      }
    }
    $scope.nonPersistentProcess.legalEnty = selectedNodes;
  });
};