У меня есть два uiGrids на странице, каждый из которых фактически полагается на один и тот же источник данных, а фильтр используется на одном из столбцов в каждой сетке, чтобы решить, какие элементы должны появляться в что сетка, идея в том, что если я хочу, чтобы элемент появлялся в другой сетке, мне просто нужно обновить свойство объекта, и он перепрыгнет через него.Динамическое обновление объекта, разделяемого между двумя uiGrids AngularJS
Проблема, с которой я сталкиваюсь, заключается в том, что когда я обновляю свойство объекта в данных, я вижу изменение, отраженное в данных в сетке, но оно не перескакивает в другую сетку - если однако я поставлю новый объект, который он перескочит.
Я установил следующий код (основанный на одном из уроков uiGrid) на Plunker (http://plnkr.co/edit/duMg0OZaZm7p8uSpTK0q?p=preview), демонстрирующий проблему: верхняя сетка должна показывать объект, если объект имеет свойство gender как «male», и он должен перейдите в нижнюю сетку, если пол «женский», при использовании кнопки обновления вы можете увидеть изменение пола, но оставайтесь в текущей сетке. Я также попытался использовать внешний фильтр и вручную обновить его, чтобы проверить, не вызывает ли это обновление, но это не сработало.
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants',
function($scope, $http, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
// default
{
field: 'name'
},
// pre-populated search field
{
field: 'gender',
filter: {
term: 'male'
}
},
// no filter input
{
field: 'company',
enableFiltering: false,
filter: {
noTerm: true,
condition: function(searchTerm, cellValue) {
return cellValue.match(/a/);
}
}
},
// specifies one of the built-in conditions
// and a placeholder for the input
{
field: 'email',
filter: {
condition: uiGridConstants.filter.ENDS_WITH,
placeholder: 'ends with'
}
},
// custom condition function
{
field: 'phone',
filter: {
condition: function(searchTerm, cellValue) {
var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
return strippedValue.indexOf(searchTerm) >= 0;
}
}
},
// multiple filters
{
field: 'age',
filters: [{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
}, {
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}]
}
]
};
$scope.gridOptions2 = {
enableFiltering: true,
columnDefs: [
// default
{
field: 'name'
},
// pre-populated search field
{
field: 'gender',
filter: {
term: 'female'
}
},
// no filter input
{
field: 'company',
enableFiltering: false,
filter: {
noTerm: true,
condition: function(searchTerm, cellValue) {
return cellValue.match(/a/);
}
}
},
// specifies one of the built-in conditions
// and a placeholder for the input
{
field: 'email',
filter: {
condition: uiGridConstants.filter.ENDS_WITH,
placeholder: 'ends with'
}
},
// custom condition function
{
field: 'phone',
filter: {
condition: function(searchTerm, cellValue) {
var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
return strippedValue.indexOf(searchTerm) >= 0;
}
}
},
// multiple filters
{
field: 'age',
filters: [{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
}, {
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}]
}
]
};
$scope.updateData = function() {
if ($scope.myData.stuff[0].gender === 'male') {
$scope.myData.stuff[0].gender = 'female';
} else {
$scope.myData.stuff[0].gender = 'male';
}
};
$scope.replaceData = function() {
if ($scope.myData.stuff[0].gender === 'male') {
$scope.myData = {
stuff: [{
"id": 0,
"guid": "de3db502-0a33-4e47-a0bb-35b6235503ca",
"isActive": false,
"balance": "$3,489.00",
"picture": "http://placehold.it/32x32",
"age": 30,
"name": "Sandoval Mclean",
"gender": "female",
"company": "Zolavo",
"email": "[email protected]",
"phone": "+1 (902) 569-2412",
"address": {
"street": 317,
"city": "Blairstown",
"state": "Maine",
"zip": 390
},
"about": "Fugiat velit laboris sit est. Amet eu consectetur reprehenderit proident irure non. Adipisicing mollit veniam enim veniam officia anim proident excepteur deserunt consectetur aliquip et irure. Elit aliquip laborum qui elit consectetur sit proident adipisicing.\r\n",
"registered": "1991-02-21T23:02:31+06:00",
"friends": [{
"id": 0,
"name": "Rosanne Barrett"
}, {
"id": 1,
"name": "Nita Chase"
}, {
"id": 2,
"name": "Briggs Stark"
}]
}]
};
} else {
$scope.myData = {
stuff: [{
"id": 0,
"guid": "de3db502-0a33-4e47-a0bb-35b6235503ca",
"isActive": false,
"balance": "$3,489.00",
"picture": "http://placehold.it/32x32",
"age": 30,
"name": "Sandoval Mclean",
"gender": "male",
"company": "Zolavo",
"email": "[email protected]",
"phone": "+1 (902) 569-2412",
"address": {
"street": 317,
"city": "Blairstown",
"state": "Maine",
"zip": 390
},
"about": "Fugiat velit laboris sit est. Amet eu consectetur reprehenderit proident irure non. Adipisicing mollit veniam enim veniam officia anim proident excepteur deserunt consectetur aliquip et irure. Elit aliquip laborum qui elit consectetur sit proident adipisicing.\r\n",
"registered": "1991-02-21T23:02:31+06:00",
"friends": [{
"id": 0,
"name": "Rosanne Barrett"
}, {
"id": 1,
"name": "Nita Chase"
}, {
"id": 2,
"name": "Briggs Stark"
}]
}]
};
}
$scope.gridOptions.data = $scope.myData.stuff;
$scope.gridOptions2.data = $scope.myData.stuff;
};
$scope.myData = {
stuff: [{
"id": 0,
"guid": "de3db502-0a33-4e47-a0bb-35b6235503ca",
"isActive": false,
"balance": "$3,489.00",
"picture": "http://placehold.it/32x32",
"age": 30,
"name": "Sandoval Mclean",
"gender": "male",
"company": "Zolavo",
"email": "[email protected]",
"phone": "+1 (902) 569-2412",
"address": {
"street": 317,
"city": "Blairstown",
"state": "Maine",
"zip": 390
},
"about": "Fugiat velit laboris sit est. Amet eu consectetur reprehenderit proident irure non. Adipisicing mollit veniam enim veniam officia anim proident excepteur deserunt consectetur aliquip et irure. Elit aliquip laborum qui elit consectetur sit proident adipisicing.\r\n",
"registered": "1991-02-21T23:02:31+06:00",
"friends": [{
"id": 0,
"name": "Rosanne Barrett"
}, {
"id": 1,
"name": "Nita Chase"
}, {
"id": 2,
"name": "Briggs Stark"
}]
}]
};
$scope.gridOptions.data = $scope.myData.stuff;
$scope.gridOptions2.data = $scope.myData.stuff;
}
]);
У кого-нибудь есть простая проблема? Когда это будет использовано, это будет с данными, полученными с сервера, и сотнями (возможно, тысячами) объектов, поэтому я не хочу каждый раз создавать новые данные, чтобы заставить все работать.