1
私は、これをプロジェクトで使用するAngular UI-Grid b/cの例を読んでいます。私はここでドキュメントと例をスタックに従っています。しかし、自分のデータを自分のテーブルに表示することはできません。私は他のものに基づいてこの塊を作り、私がやっていることを単純化しました。私はなぜデータが表示されないのか分からないのですか？どんな助けもありがとうございます。角度UIグリッドが表示するデータを取得できません
http://plnkr.co/edit/jOOePX4X1BliOXdG95pC?p=preview
index.htmlを
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div ng-controller="appController ">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="mygrid" ></div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module("myApp", ['ngTouch','ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.resizeColumns'])
myApp.controller("appController", ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
$scope.gridOptions = {
enableCellEditOnFocus: false,
enableSorting: true,
enableGridMenu: true,
columnDefs: $scope.columns,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
}
};
$scope.saveRow = function(rowEntity) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
console.log("record EDIT" + angular.toJson(rowEntity));
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval(function() {
if(rowEntity.test_status === 'Active') {
console.log("accepting edit, b/c status is Active");
promise.resolve();
}else {
console.log("rejecting edit, b/c status is Inactive");
promise.reject();
}
}, 1000, 1);
};
$http.get('data.json')
.success(function(data) {
console.log("data == " + angular.toJson(data));
$scope.gridOptions.data = data;
});
}]);
JSONデータ
[
{
"testA": "1","description": "test1","order": "1","test_status": "Active"
},
{
"testB": "2","description": "test2","order": "2","test_status": "Active"
},
{
"testC": "3","description": "test3","order": "3","test_status": "Active"
},
{
"testD": "4","description": "test4","order": "4","test_status": "Inactive"
},
{
"testE": "5","description": "test5","order": "5","test_status": "Active"
}
]
CSS
.mygrid {
width: 450px;
height: 150px;
}
UI-Gridドキュメントから...「UI-Gridは現在、1.2.xから1.4.xの範囲の角度バージョンと互換性があります。」あなたは角度1.5.2を使用しています – jbrown