Как заставить Angular JS Multiselect Dropdown Filter выбрать данные в таблице? - PullRequest
Новая
       16

Как заставить Angular JS Multiselect Dropdown Filter выбрать данные в таблице?

0 голосов
/ 31 мая 2019

Я построил простой список с двумя раскрывающимися списками, например раскрывающийся список категорий и раскрывающийся список подкатегорий.При выборе значения из категории, то есть программного обеспечения, будут отображаться только записи, содержащие категорию программного обеспечения.При выборе подкатегории «Электронная почта» будут отображаться только записи, содержащие эти два значения.

Требование изменилось, и теперь я должен иметь возможность выбирать несколько значений из категории, то есть программное обеспечение и базу данных из одного столбца.После этого выбора должны отображаться данные в таблице, содержащей только программное обеспечение и базу данных.

Я собрал многоканальный выпадающий список Angular JS, но у меня возникли проблемы при подключении к таблице.

Когда я загружаюданные с примененным фильтром я получаю список объектов

Я думаю, что мне нужно использовать идентификатор из клиентского скрипта, чтобы выбрать объект, который я хочу отобразить, но я не знаю, как.

Когда я нажимаю на множественный выбор, все идентификаторы из клиентских сценариев привязываются к каждому объекту:

Любая помощь очень ценится !!! 

    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 для управления данными в таблице

1 Ответ

0 голосов
/ 31 мая 2019

Не используйте фильтр. Добавьте функцию 'onSelectionChanged' в div 'ng-dropdown-multiselect', и когда что-то изменится в выделении, вы отфильтруете массив с выбранным массивом. 

<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">
...