サーバーに対して単一のajax呼び出しを行おうとしていますが、応答を使用して同じデータでより多くのAngularJSを呼び出しようとしています。私はangular.min.jsとng-table.min.jsを使用してhtmlテーブルを作成します。しかし、それは私にはうまくいきません。
助けてくれてありがとう。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" />
<b>List of Orders 1:</b><br>
<div>
<div ng-controller="selectFilterController1">
<table ng-table="tableParams" id="datatable" class="table" show-filter="true" style="font-size: 11px;position: relative; width: 100%">
<tbody>
<tr ng-repeat="row in $data" ng-class="{'color-status-green': row.status === row.status}">
<td style="width:40px;white-space:nowrap;" title="Address from" data-title="'Address from'" filter="{board_address: 'text'}" sortable="'board_address'">{{ row.board_address }}</td>
<td style="width:40px;white-space:nowrap;" title="Address to" data-title="'Address to'" filter="{dest_address: 'text'}" sortable="'dest_address'">{{ row.dest_address }}</td>
<td style="width:40px;white-space:nowrap;" title="Last name" data-title="'Last name'" filter="{last_name: 'text'}" sortable="'last_name'">{{ row.last_name }}</td>
<td style="width:40px;white-space:nowrap;" title="Time" data-title="'Time'" filter="{created_at: 'text'}" sortable="'created_at'">{{ row.created_at }}</td>
</tr>
</tbody>
</table>
</div>
<br><b>List of Orders 2:</b><br>
<div ng-controller="selectFilterController2">
<table ng-table="tableParams" id="datatable" class="table" show-filter="true" style="font-size: 11px;position: relative; width: 100%">
<tbody>
<tr ng-repeat="row in $data" ng-class="{'color-status-green': row.status === row.status}">
<td style="width:40px;white-space:nowrap;" title="Address from" data-title="'Address from'" filter="{board_address: 'text'}" sortable="'board_address'">{{ row.board_address }}</td>
<td style="width:40px;white-space:nowrap;" title="Address to" data-title="'Address to'" filter="{dest_address: 'text'}" sortable="'dest_address'">{{ row.dest_address }}</td>
<td style="width:40px;white-space:nowrap;" title="Last name" data-title="'Last name'" filter="{last_name: 'text'}" sortable="'last_name'">{{ row.last_name }}</td>
<td style="width:40px;white-space:nowrap;" title="Time" data-title="'Time'" filter="{created_at: 'text'}" sortable="'created_at'">{{ row.created_at }}</td>
</tr>
</tbody>
</table>
</div>
関数を呼び出すとajaxCallOrders()、応答はコントローラーに転送されますが、
var app = angular.module('ngTableApp', ['ngTable']);
var datax;
app.controller('selectFilterController1', function($scope, $http, $filter, $q, NgTableParams) {
var datax;
$scope.arrayTemp = [];
module1 = function(response){
$scope.myData = angular.fromJson(response.data);
angular.forEach($scope.myData, function(element) {
$scope.arrayTemp.push(element);
});
datax=$scope.array = $scope.arrayTemp;
$scope.tableParams = new NgTableParams({page: 1, count: datax.length}, {data: datax, counts: [10, 15, 20, datax.length]});
}
})
app.controller('selectFilterController2', function($scope, $http, $filter, $q, NgTableParams) {
var datax;
$scope.arrayTemp = [];
module2 = function(response){
$scope.myData = angular.fromJson(response.data);
angular.forEach($scope.myData, function(element) {
$scope.arrayTemp.push(element);
});
datax=$scope.array = $scope.arrayTemp;
$scope.tableParams = new NgTableParams({page: 1, count: datax.length}, {data: datax, counts: [10, 15, 20, datax.length]});
}
})
ajaxCallOrders = (function(){
var orderListData = {"token": authToken, "limit": "50"};
$.ajax({
type: 'POST',
url: 'orders.php',
data: JSON.stringify(orderListData),
contentType: 'application/x-www-form-urlencoded',
dataType: 'text',
processData: false,
success: function( data, textStatus, jQxhr ){
var response = data;
module1(response);
module2(response);
},
error: function( jqXhr, textStatus, errorThrown ){
console.log( errorThrown );
}
});
});
複数のコントローラーに注入可能なメソッドとデータを含めるには、AngularJSサービスを作成します。
app.service("orders", function($http) {
var orderListData = {"token": authToken, "limit": "50"};
var config = { params: orderListData };
var ordersPromise = $http.get("orders.php",config);
this.getPromise = function() {
return ordersPromise;
});
};
app.controller('selectFilterController2', function(orders, NgTableParams) {
orders.getPromise().then(function(response){
$scope.array = response.data;
var xLength = $scope.array.length;
$scope.tableParams = new NgTableParams(
{page: 1, count: xLength},
{data: datax, counts: [10, 15, 20, xLength]}
);
}
})
このサービスは、$ httpサービスを使用してXHRGETリクエストを実行し、Promiseを保存します。このordersサービスは、複数のコントローラーまたはその他のカスタムサービスに注入できます。このgetPromiseメソッドは、GETリクエストからの応答を含むpromiseを返します。
詳細については、を参照してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加