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

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; 
    }); 
};