angularjsに行ヘッダーと列ヘッダーの両方を持つテーブルを実装します

私は行ヘッダーと列ヘッダーの両方を持つテーブルを持っています。現在行ヘッダーの値は、テーブルに表示するために取得するjsonにも存在します。だから私は行のヘッダーを角度表現に直接マッピングしました。問題は、jsonからデータを取得する際に何らかのエラーが発生すると、行ヘッダーがまったく表示されないことです。私は、応答のない場合には列ヘッダーだけでなく、行のある空のテーブルを表示したい。実装方法を教えてください。 jsonから行ヘッダーを取り出し、行ヘッダーと列ヘッダーを直接使用してテーブルを作成すると、jsonから受け取ったデータはどのように表示されますか？angularjsに行ヘッダーと列ヘッダーの両方を持つテーブルを実装します

[ 
    { 
    "Monday": "Physics", 
    "Tuesday": "Chemistry", 
    "Wednesday": "Maths", 
    "Thursday": "English", 
    "Friday": "Computers", 
    "time": "09:00 - 11:00" 
    }, 
    { 
    "Monday": "Maths", 
    "Tuesday": "Games", 
    "Wednesday": "Physics", 
    "Thursday": "Computers", 
    "Friday": "Chemistry", 
    "time": "11:00 - 13:00" 
    }, 
    { 
    "Monday": "Computers", 
    "Tuesday": "Physics", 
    "Wednesday": "Maths", 
    "Thursday": "German", 
    "Friday": "History", 
    "time": "13:00 - 15:00" 
    }, 
    { 
    "Monday": "Accounts", 
    "Tuesday": "Maths", 
    "Wednesday": "Physics", 
    "Thursday": "French", 
    "Friday": "Chemistry", 
    "time": "15:00 - 17:00" 
    } 

]

はここでより良い説明のためのplunkerリンクです

<body ng-controller="jsonCtrl">  
<table class="table table-striped table-bordered"> 
<caption>Delivery slots:</caption> 
<tr> 
<td></td> 
<th scope="col">Monday</th> 
<th scope="col">Tuesday</th> 
<th scope="col">Wednesday</th> 
<th scope="col">Thursday</th> 
<th scope="col">Friday</th> 
</tr> 
<tr ng-repeat="data in timetable"> 
<th scope="row">{{data.time}}</th> 
<td>{{data.Monday}}</td> 
<td>{{data.Tuesday}}</td> 
<td>{{data.Wednesday}}</td> 
<td>{{data.Thursday}}</td> 
<td>{{data.Friday}}</td> 
</tr> 
</table> 
</body>

var myApp = angular.module('myApp', []); 

myApp.controller('jsonCtrl', function($scope, $http){ 
$http.get('timetable.json').success(function (data){ 
    $scope.timetable = data; 
}); 
});

JSON

HTML：はここに私のコードです。 jsonに存在する「時間」は行ヘッダーである必要があります。 https://plnkr.co/edit/SZP9tdRX7pD9oaT9uOR1?p=preview

出典

2017-03-09 Tanuj

あなたがいる場合、空行を持つテーブルをimpementする必要がありますjsonからの応答はありませんか？ –

はい@Kanya。空のテーブルを持つ行ヘッダーと列ヘッダーが表示されます。 – Tanuj

HTTP呼び出しは、あなたがこのような配列を使用することができます失敗した場合：

[ 
    { 
    "time": "09:00 - 11:00" 
    }, 
    { 
    "time": "11:00 - 13:00" 
    }, 
    { 
    "time": "13:00 - 15:00" 
    }, 
    { 
    "time": "15:00 - 17:00" 
    } 

]

ので、コントローラを変更することがあります。

var myApp = angular.module('myApp', []); 

myApp.controller('jsonCtrl', function($scope, $http){ 
$http.get('timetable.json').then(function (data){ 
    $scope.timetable = data; 
}, 
//error callback 
function (response){ 
$scope.timetable = [ 
    { 
    "time": "09:00 - 11:00" 
    }, 
    { 
    "time": "11:00 - 13:00" 
    }, 
    { 
    "time": "13:00 - 15:00" 
    }, 
    { 
    "time": "15:00 - 17:00" 
    } 

] 
} 
); 
});

出典

2017-03-09 09:01:36 robert

この解決策はうまくいきますが、これを達成するためのより良い方法があるかどうかは不思議でした。 – Tanuj

本当にありません。つまり、ハードコーディングされた配列をforループで置き換えて区間を生成することができますが、それ以外の方法を改善する方法はわかりません。しかし、エラーが発生した場合、このような情報をユーザに示すというアイデアが気に入らないと言わざるを得ない。ユーザはスケジュールが空であると考えることができる。私はエラーが発生したことを通知しなければならないと思います。 – robert

私はこの問題のために大胆な例を共有しましたが、実際のアプリケーションでは、ユーザーに空の応答を示すことは有効なシナリオです。ヘルプ@robertに感謝します。 – Tanuj

angularjsに行ヘッダーと列ヘッダーの両方を持つテーブルを実装します

答えて

関連する問題