アップデート
問題: 1 行または 2 行で何が必要かを説明してみましょう。編集ボタンをクリックしたときに Angular Datatables を使用したデモ 1 では、データは編集フォームに表示されませんが、デモ 2 では使用していません。任意のデータテーブルですが、データが編集フォームにはっきりと表示されている場合、Datatables を使用してデータを Demo1 に表示したいと考えています。データは $scope.update 内にありますが、同じ HTML を使用しているのに、何らかの理由で HTML に表示されません。データテーブルがなくても完全に機能します。
デモ 1: http://plnkr.co/edit/EXXbkPUHfxcZ3blzvMaz?p=preview
デモ 2: http://plnkr.co/edit/QYZzmJNwWTQaIgvUkRzQ?p=preview
バックグラウンド
最初に左側に、1 つの入力タイプと 1 つの選択 (コロニー タイプ) を含むフォームからデータが挿入されます。左側には挿入用と更新用の 2 つのフォームがあります。1 つのフォームは挿入用で、もう 1 つは編集用です。挿入フォームが表示され、編集フォームが非表示になり、その逆も同様です。右側には、[編集] ボタンと [削除] ボタンとともに、データテーブルの助けを借りてデータのリストが表示されます。重要なことは、ボタンは DataTable コード内で作成され、 HTMLページでは、削除と挿入は問題なく機能しますが、編集!! いいえ、そうではありません。
問題
ケース 1: (Datatables を使用する場合) [編集] ボタン (CODED INSIDE DATATABLES) をクリックすると ID が送信されます。下の図では、ID は「47」とコンソール化され、データを取得して印刷する $http 要求が作成されます。コンソール。しかし、更新フォームに値を挿入しようとしても機能しませんが、$scope をコンソールすると、値は更新オブジェクトに挿入されますが、HTML ページには出力されません。
ケース 2: (Datatables を使用しない場合) Datatables を使用せずに [編集] ボタンをクリックすると、すべてが正常に機能し、データが更新オブジェクトに挿入され、HTML ページに出力されます。
HTML ページ:
DataTables を使用する場合
<!-- IF DataTables are Used For printing the Data on Right Side-->
<div ng-controller="colony_Controller as Main_Module">
<table class="table table-striped table-bordered" align="center" datatable="" dt-options="Main_Module.dtOptions" dt-columns="Main_Module.dtColumns" class="row-border hover">
</table>
DataTables が使用されていない場合
<!-- If DataTables are NOT Used for Printing the Data on Right Side -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 323px;" aria-label="">Colony Name</th>
<th style="width: 170px;" aria-label="">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="colony in es_colony_details" >
<td style="width: 323px;" aria-label="">{{colony.es_colony_name}}</td>
<td>
<button ng-click="EditColonyData(colony.es_colony_id)" class="btn btn-primary">
<i class="icon-edit"></i> Edit</button>
<button ng-click="DeleteColonyData(colony.es_colony_id)" class="btn btn-danger">
<i class="icon-remove icon-white"></i> Delete</button>
</td>
</tr>
</tbody>
</table>
コントローラ
Main_Module.controller('colony_Controller', function colony_Controller($window, $scope, $http, bootbox, $compile, DTOptionsBuilder, DTColumnBuilder, SimpleHttpRequest, DelMainRecPicRecUnlinkPic, message)
{
$scope.field = {};
$scope.update = {};
var dtInstance = {};
/********************************** FETCH DATA START *******************************/
$http.get('http://localhost:3000/api/SELECT/es_colony_type').success(function successCallback(data)
{
$scope.es_colony_type = data.es_colony_type;
//console.log(data.es_colony_type);
});
// ONLY USED WHEN Datatable are NOT
//$http.get("http://localhost:3000/api/SELECT/es_colony").success(function successCallback(data)
//{
// $scope.es_colony_details = data.es_colony;
// console.log(data.es_colony);
//});
/********************************** FETCH DATA END *********************************/
/********************************** DISPLAY DATA START *******************************/
var vm = this;
vm.dtOptions = DTOptionsBuilder
.fromFnPromise(function()
{
return $http.get('http://localhost:3000/api/SELECT/es_colony')
.then(function(response)
{
return response.data.es_colony;
});
})
.withOption('order', [0, 'desc'])
.withDisplayLength(5)
.withPaginationType('simple_numbers')
.withOption('createdRow', function(row, data, dataIndex)
{
$compile(angular.element(row).contents())($scope);
})
vm.dtColumns =
[
DTColumnBuilder.newColumn('es_colony_name').withTitle('Colony'),
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().withOption('width', '31%')
.renderWith(function(data, type, full, meta)
{
return '<button class="btn btn-primary" ng-click="EditColonyData(' + data.es_colony_id + ');">' +
'<i class="icon-edit"></i> Edit' + '</button> ' +
'<button class="btn btn-danger" ng-click="DeleteColonyData(' + data.es_colony_id + ');">' +
'<i class="icon-remove icon-white"></i> Delete' + '</button>';
})
];
$scope.EditColonyData = function(id)
{
console.log(id);
$http.get('api/SELECTBYID/es_colony/es_colony_id/'+id)
.success(function(data)
{
console.log(data);
console.log($scope);
$scope.YesEdit = true;
$scope.update = data.es_colony[0];
// **This is where I'm injecting data Back to $scope object**
$scope.update.es_colony_type_id = data.es_colony[0].es_colony_type_id;
});
};