ui сетка фильтрация выпадающего списка

Question

Данные в моих столбцах (предоставленные выпадающим списком) и фильтр столбца должны совпадать. Поэтому я использую один и тот же массив для заполнения обоих. Тем не менее, для данных я могу указать сету ui имена полей, которые будут использоваться для editDropdownValueLabel и editDropdownIdLabel. Есть ли такая вещь для свойства фильтра?

Я спрашиваю, потому что я устанавливаю значения выпадающего списка ячеек и фильтр из массива, извлеченного из вызова веб-ави, а раскрывающийся список ячеек данных заполнен правильно, но мои фильтры все говорят «undefined», что заставляет меня поверить он не знает, какое поле используется в свойстве selectOptions.

Когда я определяю свою сетку, я оставляю массивы для ячейки и фильтрует, поскольку я буду заполнять это, когда вызов web api возвращается с этими данными.

{ 
    name: 'Status', 
    field: 'Status', 
    width: 200, 
    editType: 'dropdown', 
    editableCellTemplate: 'ui-grid/dropdownEditor', 
    editDropdownIdLabel: 'Value', 
    editDropdownValueLabel: 'Value', 
    filter: { 
     type: uiGridConstants.filter.SELECT, 
     condition: uiGridConstants.filter.EXACT 
    } 
} 

Как я заполняю выпадающее меню и выпадающее окно ячейки из данных веб-api.

$scope.gridStore.columnDefs[i].editDropdownOptionsArray = response.data[colFieldName]; 
$scope.gridStore.columnDefs[i].filter.selectOptions = response.data[colFieldName]; 

Answer 1

Не видя больше кода, трудно точно сказать, что происходит, но в в следующем примере динамическое добавление определения столбца состояния.

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']); 
 

 
app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) { 
 

 
    $scope.myData = [{ 
 
    "Name": "Cox", 
 
    "Number": 41, 
 
    "Status": 1, 
 
    "Date": "10/06/1981" 
 
    }, { 
 
    "Name": "Lorraine", 
 
    "Number": 431, 
 
    "Status": 2, 
 
    "Date": "03/04/1983" 
 
    }, { 
 
    "Name": "Nancy", 
 
    "Number": 341, 
 
    "Status": 1, 
 
    "Date": "10/06/1981" 
 
    }]; 
 

 
    // grid setup 
 
    $scope.gridStore = { 
 
    data: $scope.myData, 
 
    enableSorting: true, 
 
    enableFiltering: true, 
 
    flatEntityAccess: true, 
 
    fastWatch: true, 
 
    enableHorizontalScrollbar: 1, 
 
    enableCellSelection: true, 
 
    enableCellEditOnFocus: true, 
 
    columnDefs: [{ 
 
     name: 'Number', 
 
     field: 'Number', 
 
     width: 100, 
 
     pinnedLeft: true, 
 
     enableCellEdit: false 
 
     }, { 
 
     name: 'Name', 
 
     field: 'Name', 
 
     width: 200, 
 
     pinnedLeft: true, 
 
     enableCellEdit: false 
 
     }, { 
 
     name: 'Date', 
 
     field: 'Date', 
 
     width: 100 
 
     } 
 
    ] 
 
    }; 
 
    
 
    this.typeLookup = function (val, arr) { 
 
    var result = arr.filter(function(v) { 
 
     return v.id === val; 
 
    })[0].type; 
 

 
    return result; 
 
    }; 
 

 

 
    /* simulate getting JSON settings data here ... */ 
 
    
 
    var jsonDef = { name: 'Status', field: 'Status', width: 150, editType: 'dropdown', editableCellTemplate: 'ui-grid/dropdownEditor', editDropdownIdLabel: 'id', editDropdownValueLabel: 'type', filter: { type: uiGridConstants.filter.SELECT, condition: uiGridConstants.filter.EXACT } }; 
 

 
    var options = [{ 
 
    id: 1, 
 
    type: 'Closed' 
 
    }, { 
 
    id: 2, 
 
    type: 'Pending' 
 
    }, { 
 
    id: 3, 
 
    type: 'Open' 
 
    }]; 
 

 
    $scope.gridStore.columnDefs.push(jsonDef); 
 
    
 
    var idx = $scope.gridStore.columnDefs.length - 1; 
 
    
 
    $scope.gridStore.columnDefs[idx].cellTemplate = '<div class="ui-grid-cell-contents">{{ grid.appScope.Main.typeLookup(COL_FIELD,' + JSON.stringify(options) + ') }}</div>'; 
 
    $scope.gridStore.columnDefs[idx].editDropdownOptionsArray = options; 
 
    $scope.gridStore.columnDefs[idx].filter.selectOptions = options.map(function(obj) { 
 
    var rObj = {'value': obj.id, 'label': obj.type}; 
 
    return rObj; 
 
    }); 
 
    
 
    /* end simulated JSON retrieval */ 
 

 
}]);

.grid { 
 
    height: 200px; 
 
}

<!doctype html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
 
    <script src="http://ui-grid.info/release/ui-grid.js"></script> 
 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="MainCtrl as Main"> 
 
    <div id="grid1" ui-grid="gridStore" ui-grid-edit class="grid"></div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Answer 2

Аккуратный особенность я использую при работе с выпадающие на Ui сетках, что я отношусь к ним, как они всегда динамичный, так что я больше не придется иметь дело с OptionsArray, фильтры, этикетки и так далее (что является боль с динамическими данными).

Просто изучите, когда вы планируете расширить свои знания в угловой сетке ui.

HTML:

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div> 

Контроллер:

$scope.gridOptions = { 
    enableSorting: true, 
    enableFiltering: true, 
    enableCellEditOnFocus: true, 
    columnDefs: [ 
     { field: 'name', 
     sort: { 
      direction: 'desc', 
      priority: 1 
     } 
     }, 
     { field: 'gender', editType: 'dropdown', enableCellEdit: true, 
      editableCellTemplate: 'temp.html' }, 
     { field: 'company', enableSorting: false } 
]}; 

temp.html:

<div> 
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType"> 
     <option value="" selected disabled>Choose Gender</option> 
    </select> 
</div>