привязка данных - ui grid

Question

Я пытаюсь реализовать UI-сетку в своем приложении. Все работает нормально, когда я назначаю статические данные gridOptions.data; однако, когда я динамически присваиваю данные gridOptions.data после загрузки данных с сервера, я всегда получаю пустую строку. Я попытался воспроизвести динамическое поведение с помощью функции $timeout, как показано ниже, и результат все тот же: пустая сетка.

// Ctrl начинается

Это работает.

$scope.data = [ 
      { addedBy :"user", displayName:"Name1" }, 
      { addedBy :"user2", displayName:"Name2" }, 
      { addedBy :"user3", displayName:"Name3" } 
      ]; 

Это не делает; оставляя сетку пустой.

$timeout(function() { 
     $scope.data = [ 
     { addedBy :"user", displayName:"Name1" }, 
     { addedBy :"user2", displayName:"Name2" }, 
     { addedBy :"user3", displayName:"Name3" } 
     ]; 
    }); 

Остальная часть кода остается тем же самым.

$scope.columnDefs = [ 
     {name: 'displayName'}, 
     {name: 'addedBy'} 
     ]; 

$scope.gridOptions = { 
columnDefs: $scope.columnDefs, 
data: $scope.data 
}; 

// Ctrl заканчивается

// HTML начинается

<div class="col-md-12 no-padding" ui-grid="gridOptions" class="grid"></div> 

// HTML заканчивается

Я довольно пользовательский интерфейс сетка должна быть способна обновлять данные, когда данные переменные изменения; так есть ли что-то основное, что мне здесь не хватает?

Answer 1

Данные не доступны при инициализации сетки. Вы должны вручную вызвать notifydataChange для сетки, чтобы обновить или переназначить его, как говорит Рональд.

Они есть пример в их documentation последнего

Answer 2

Другой вариант, вы можете сделать это по умолчанию определение сетки пустой массив и в ответ вашего вызова сервера назначить его к сетке.

$scope.columnDefs = [ 
     {name: 'displayName'}, 
     {name: 'addedBy'} 
     ]; 

$scope.gridOptions = { 
columnDefs: $scope.columnDefs, 
data: [] 
}; 

$timeout(function() { 
     $scope.data = [ 
     { addedBy :"user", displayName:"Name1" }, 
     { addedBy :"user2", displayName:"Name2" }, 
     { addedBy :"user3", displayName:"Name3" } 
     ]; 
$scope.gridOptions.data=$scope.data; 
    }); 

Answer 3

У меня очень динамичная сетка, где данные обновляются для множества параметров. Я всегда возвращаю данные обратно в $ scope.gridOptions.data напрямую.

Т.е

$timeout(function() { 
    $scope.gridOptions.data = [ 
    { addedBy :"user", displayName:"Name1" }, 
    { addedBy :"user2", displayName:"Name2" }, 
    { addedBy :"user3", displayName:"Name3" } 
    ]; 
}); 

Данные переподчиняемых здесь, для каждого вашего результата поиска

NotifyDataChange событие можно использовать следующим образом:

$scope.gridOptions.onRegisterApi = function (gridApi) { 
    //set gridApi on scope 
    $scope.gridApi = gridApi; 
     $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); 
    }; 

Вы должны добавить uiGridConstants зависимость в вашем контроллер. Но из моих выводов/тестов, если вы переназначаете данные в gridOptions.data, то notifyDataChange событие не требуется.