Question

我用两个下拉列表构建了简单列表，例如，类别下拉列表和子类别下拉列表。当您从类别即软件中选择值时，将仅显示包含软件类别的记录。并且，当您选择“电子邮件”子类别时，将仅显示包含这两个值的记录。

需求已更改，现在我应该能够从类别（即，从同一列中选择软件和数据库）中选择多个值。选择此选项后，应在表格中显示仅包含软件和数据库的数据。

我已经构建了Angular JS下拉列表multilselect，但是将其连接到表时遇到了问题。

在应用过滤器加载数据时，我得到了对象列表

我想我需要使用客户端脚本中的id来选择要显示的对象，但我不知道如何。

当我单击multil时，从客户端脚本中选择所有id都将附加到每个对象：

任何帮助，不胜感激！

    function($scope) {
      /* widget controller */
      var c = this;

        $scope.example1model = [];
        $scope.example1data = [
                                                    {id: 1, label: "software"}, 
                                                    {id: 2, label: "database"}, 
                                                    {id: 3, label: "hardware"}
        ];

        $scope.filterTable = function(row){
            var right = false;
        console.log(row,$scope.example1model)
            if($scope.example1model){
                Object.keys($scope.example1model).forEach(function(val){
                    if(row.notes_category == val.label)
                        right = true;
                        //return label;
                })
            }
            else

            //  right = true
         return right;
        }


    }


    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div ng-dropdown-multiselect=""  options="example1data" selected-model="example1model"></div>
            </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
    </nav>
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">Data</div>

      <!-- Table -->
      <table class="table">
         <tr>
        <th>Number</th>
        <th>Title</th> 
        <th>Notes category</th>
        <th>Notes Subcategory</th>
        <th>Note</th>
        <th>Notes Contact Type</th>
        <th>State</th>
        <th>User</th>


      </tr>
      <tr ng-repeat="note in data.notes | filter:filterTable">
        <td>{{note.number}}</td>
        <td>{{note.title}}</td> 
        <td>{{note.notes_category}}</td>
        <td>{{note.notes_subcategory}}</td>
        <td>{{note.note}}</td>
        <td>{{note.notes_contact_type}}</td>
        <td>{{note.state}}</td>
         <td>{{note.user}}</td>
        </tr>
      </table>
    </div>

我希望使用$ scope.example1data中的id来控制表格上的数据

Answer 1

请勿使用过滤器。在“ ng-dropdown-multiselect” div处添加一个函数“ onSelectionChanged”，当选择发生变化时，您将使用选定的数组过滤该数组。

<div ng-dropdown-multiselect=""  options="example1data" selected-model="example1model" events="onSelectionChanged()"></div>

控制器功能（不确定模型的结构）：

 $scope.onSelectionChanged = function() { 
     let notes = $scope.data.notes;

     $scope.data.notes = notes.filter((note) => $scope.example1model.find(({ item }) => 
     note.notes_category == item.label);
}

并在html表中：

<tr ng-repeat="note in data.notes">

如何使Angular JS Multiselect Dropdown Filter选择表上的数据？

1 个答案: