Get angularjs post value in controller - angularjs

I want to get post value which i have send in $http.post() in controller when i click on edit button.
view page
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Sl No.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<td>{{$index + 1}}</td>
<td>{{data.name}}</td>
<td>
<a class="btn btn-info btn-sm btn-fill" ng-click="editsource(data.id)" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil-square-o"></i> Edit</a>
<a class="btn btn-danger btn-sm btn-edit btn-fill delete"><i class="fa fa-trash"></i> Delete</a>
</td>
</tr>
</tbody>
My script
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('tabletest', function ($scope, $http) {
$http.get("<?php echo base_url() ?>admin/source_list_for_test")
.then(function (response) {
$scope.datas = response.data;
});
$scope.editsource = function (id) {//alert('hello');
$http.post("<?php echo base_url() ?>admin/edit_source_for_test?id="+id).success(function (data) {
alert(data);
$scope.id = data['id'];
$scope.name = data['name'];
});
};
});
controller
public function edit_source_for_test(){
$id= $_GET['id'];
$data['source_data'] = $this->admin_model->get_edit_source_for_test($id);
echo json_encode($data['source_data']);
}
Above is my code but id not get in controller,How i get selected record id in controller.

Related

Show fetched data in a table using angularjs

I want to show data in a table using angularjs in codeigniter.
Controller:
public function source_list_for_test(){
$data['get_source'] = $this-> admin_model-> get_all_source_list_for_test();
echo json_encode($data['get_source']);
}
Model:
function get_all_source_list_for_test() {
$this->db->select('*');
$this->db->from('source');
$query = $this->db->get();
return $query->result_array();
}
View:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div class="table-responsive" ng-app="myapp" ng-controller="tabletest">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Sl No.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<td>{{index + 1}}</td>
<td>{{data.name}}</td>
<td><a class="btn btn-info btn-sm btn-fill" href="">
<i class="fa fa-pencil-square-o"></i> Edit</a>
<a class="btn btn-danger btn-sm btn-edit btn-fill delete" id="" ><i class="fa fa-trash"></i> Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="<?php echo base_url()?>app/js_code.js></script>
Js file is
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('tabletest', function($scope, $http) {
$http.get(baseUrl + "admin/source_list_for_test")
.then(function(response) {
$scope.datas = response.data;
});
});
</script>
I tried this but data not fetched and not bind in my view page.this shows below screen shoot.
enter image description here
did you check for app.js file, may be app.js not downloaded.

Inline edit in angular

I did one simple inline edit in angular.Its working fine,But when I try to integrate with server side code am getting struggle.I dont know how to send edited field value while updating.
html:
<table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl">
<thead class="colorBlue">
<tr>
<th>S.No</th>
<th>Role Name</th>
<th>Action</th>
</tr>
</thead>
<tbody id="">
<tr ng-repeat="x in roleList | filter:searchText">
<td>{{x.Id}}</td>
<td>
<span ng-hide="editMode">{{x.name}}</span>
<input type="text" ng-show="editMode" ng-model="x.name" />
</td>
<td>
<i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="editMode = true;edit(x.Id)" ng-hide="editMode"></i>
<i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-hide="true" ng-show="editMode" ng-click="editMode = false"></i>
<i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="editMode = false" ng-hide="true" ng-show="editMode"></i>
</td>
</tr>
</tbody>
</table>
script:
<script>
var app=angular
.module("intranet_App", [])
.controller('myCtrl', function ($scope, $http) {
$scope.values = {
};
$http.post("/Admin/getUserList")
.then(function (response) {
$scope.roleList = response.data;
});
$scope.edit=function(val){
$scope.editing = $scope.items.indexOf(val);
}
$scope.update = function (val) {
$http.post("/Admin/UserUpdate")
.then(function (response) {
alert("updated successfully");
})
}
//$scope.cancel = function (val) {
//}
})
</script>
Am getting table data from this method /Admin/getUserList
while updating the rows I need to pass edited data to this method /Admin/UserUpdate
Please any help?

How to prevent destroy data from DataTable with Angular

I'm try to implement DataTables with Angular, I'm googled and some many solutions is creating directives, its ok but is very old only "normal" way draw a DataTable, the problem is sorting or typing into search box my data is lost!! E.g:
And my code:
View
var myApp = angular.module('myApp', ['ngRoute','ui.utils']);
myApp.controller("CompanyController", function ($scope, $window, CompanyService) {
$scope.Companies = [];
$scope.Company = {};
$scope.dataTableOpt = {
//custom datatable options
"aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, 'All']],
};
$scope.$watch("data", function (value) {
console.log("Data changed, refresh table:");
var val = value || null;
if (val) {
}
});
$scope.InitializeIndexView = function () {
var getAllProcess = CompanyService.GetAllCompanies();
getAllProcess.then(function (response) {
//console.log(response.data)
$scope.Companies = response.data;
},
function (response) {
console.log(response);
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<table id="company-table" class="table table-striped table-bordered" ui-jq="DataTable" ui-options="dataTableOpt">
<thead>
<tr>
<th>Id</th>
<th>Register time</th>
<th>Short Name</th>
<th>Long Name</th>
<th>Status</th>
<th>Owner Client</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Companies">
<td>{{item._id}}</td>
<td>{{item.RegisterTime}}</td>
<td>{{item.LongName}}</td>
<td>{{item.ShortName}}</td>
<td>{{item.CompanyStatus}}</td>
<td>{{item.OwnerClient}}</td>
<td>Edit | Delete</td>
</tr>
</tbody>
</table>
Edit 1:
I follow these snippet and works fine because data is static: http://codepen.io/kalaiselvan/pen/RRBzda
Angular Js
var app = angular.module('myApp', ['datatables']);
app.controller("myCtrl", function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.isDisabledupdate = true;
$scope.GetAllData = function () {
$http({
method: "get",
url: "http://localhost:8200/Employee/Get_AllEmployee"
}).then(function (response) {
$scope.employees = response.data;
}, function () {
alert("Error Occur");
})
};
$scope.vm = {};
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
View Page
<div class="panel-body" ng-init="GetAllData()">
<div class="table-responsive">
<table class="table table-striped table-bordered" datatable="ng" dt-options="vm.dtOptions">
<thead>
<tr>
<th>S.no</th>
<th>
ID
</th>
<th>
City Name
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Emp in employees">
<td>{{$index+1}}</td>
<td>
{{Emp.CId}}
</td>
<td>
{{Emp.CityName}}
</td>
<td>
<button type="button" class="btn btn-default btn" ng-click="getCustomer(Emp)"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="deleteemp(Emp)"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>
I hope this code will help you....

how do I add data to angular smart table

I have a simple angular smart-table. It loads the data correctly. If i remove some data the table updates correctly, however if I add data, the table doesnt update. Does anybody know what I am doing wrong. Help would be much appreciated!
HTML:
<div class="container">
<!-- Angular Grid -->
<div ng-controller="MainCtrl">
<table st-table="displayedCollection" class="table table-striped" st-safe-src="rowCollection">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.naam}}</td>
<td>{{row.naam2}}</td>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button></td>
</tr>
</tbody>
</table>
</div>
<button type="button" id="addData" class="btn btn-success" ng-click="addRandomItem(row)">Add Data</button>
<div ng-show='busy'>Loading data...</div>
</div>
</div>
And the Controller:
(
(function() {
'use strict';
angular
.module('app')
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$state', 'Auth', '$modal', 'scrapeAPI', '$http', '$alert', 'recommendationsAPI', 'Upload'];
function MainCtrl($scope, $state, Auth, $modal, scrapeAPI, $http, $alert, recommendationsAPI, Upload) {
$scope.displayedCollection = [];
$scope.user = Auth.getCurrentUser();
$scope.rowCollection = [];
$scope.recommendation = {};
$scope.recommendations = [];
$scope.recommendationPostForm = true;
$scope.busy = true;
$scope.allData = [];
var i = 0;
var page = 0;
var step = 3;
var data1 = [];
//gets current data
recommendationsAPI.getAllRecommendations()
.then(function(data) {
console.log('looks found ');
console.log(data);
$scope.recommendations = data.data;
for (i = 0; i < $scope.recommendations.length; i++) {
$scope.rowCollection.push($scope.recommendations[i]);
}
$scope.busy = false;
})
.catch(function(err) {
console.log('failed to get looks ' + err);
});
$scope.addRandomItem = function addRandomItem() {
$scope.recommendation = {
naam: 'tje',
naam2: 'tje'
};
$scope.recommendations.push($scope.recommendation);
for (var j = 1; j < $scope.recommendations.length; j++) {
alert ($scope.recommendations[j].guideline);
}
$scope.rowCollection.push($scope.recommendation);
};
// Verwijder recommendation volledig
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
recommendationsAPI.deleteRecommendation($scope.rowCollection[index]._id)
.then(function(data) {
console.log('delete at backend: success');
$scope.rowCollection.splice(index, 1);
});
}
}
}
})();
Your button "addRandomItem" is out of the div which holds your controller, so it can not access its scope
<div class="container">
<!-- Angular Grid -->
<div ng-controller="MainCtrl">
<table st-table="displayedCollection" class="table table-striped" st-safe-src="rowCollection">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.naam}}</td>
<td>{{row.naam2}}</td>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
</table>
<button type="button" id="addData" class="btn btn-success" ng-click="addRandomItem(row)">Add Data</button>
</div>
<div ng-show='busy'>Loading data...</div>
</div>

Ng-Click NOT working (Angular Datatables)

I have a problem with my angular datatables .
First, My code work very good, but after i add the code configure notSortable() for some colum , the ng-click of button is not working , and i can't fix it . Could you help me?
Here are my Code :
1> File index.html
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td ng-bind="person.id"></td>
<td ng-bind="person.firstName"></td>
<td ng-bind="person.lastName"></td>
<td>
<input type="button" ng-click="doClick()">
</td>
</tr>
</tbody>
</table>
2>File app.js
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.persons = [];
$http.get('data.json').success(function(persons) {
$scope.persons = persons;
});
$scope.doClick=function(){
alert("Clicked button !")
}
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(40);
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID').notSortable(),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
DTColumnBuilder.newColumn('Button').withTitle('Button')
];
});
})(angular);
Don't use
<input type="button" ng-click="doClick()">
In stead of that try to use:
<button type="button" ng-click="doClick()">Send</button>
Be sure to specify the controller in your index.html with ng-controller='simpleCtrl'
I had the same issue, below is the solution that worked for me
**1. Step 1 is same , repeating for the sake of completeness**
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="person in persons">
<td ng-bind="person.id"></td>
<td ng-bind="person.firstName"></td>
<td ng-bind="person.lastName"></td>
<td>
<input type="button" ng-click="doClick()">
</td>
</tr>
</tbody>
</table>
**Step2, In Controller, do the following**
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.persons = []
$scope.init = function() {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('aLengthMenu', [[-1], ['All']]) // Length of how many to show per pagination.
.withPaginationType('full_numbers')
.withBootstrap();
$http.get("data.json").then( function(result){
$scope.persons = result.data
});
}
$scope.init()
});
})(angular);

Resources