We Keep Coding

how to get all data using select all checkbox in table?

Hi I am trying to get all data at a time when I will click on
checkbox, but data not coming but when i click one by one data id
coming. But my problem is how to get all data in checkbox all in
single click.
This is HTML code
<div id="wrapper" class="wrapper">
<div ng-include="'views/partials/navigator.html'"></div>
<div class="page-content-wrapper">
<div ng-include="'views/partials/header.html'"></div>
<div class="row">
<div class="col-md-12">
<h3>Student Information</h3>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" id="slctAllDuplicateStd"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class ="button" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
This is javascript code
(function() {
angular
.module('vidyartha-coordinator')
.controller('StudentDuplicateAccountController', StudentDuplicateAccountController);
StudentDuplicateAccountController.$inject = ['$scope', 'ApiService', '$routeParams', '$http', '$location', '$timeout'];
function StudentDuplicateAccountController($scope, ApiService, $routeParams, $http, $location, $timeout) {
var vm = this;
//console.log($routeParams)
var page = $routeParams.page || 1;
// vm.data = [];
ApiService.getAll('student-duplicate-account?pageCount=5&pageNumber=' + page).then(function(response) {
//console.log("response::"+JSON.stringify(response));
vm.data = response.data.records;
vm.pageNumber = response.data.pageNumber;
vm.totalRecords = response.data.totalRecords;
vm.pageCount = response.data.pageCount;
$scope.renderpagination = true;
});
$("#slctAllDuplicateStd").click(function () {
$(".duplicateRow").prop('checked', $(this).prop('checked'));
// console.log('data:::'+JSON.stringify(data));
});
vm.process = function() {
vm.duplicateArray = [];
angular.forEach(vm.data, function(data){
if (data.selected) {
console.log("true")
vm.duplicateArray.push(data.tenantId);
vm.duplicateArray.push(data.mobileNumber);
vm.duplicateArray.push(data.schoolId);
vm.duplicateArray.push(data.classId);
}
});
console.log(vm.duplicateArray)
}
}
})();
I need all data at a time we i do check and press process button.
So please tell me where i should add some condition.

Am not sure why you are mixing jquery here you can do it as follow
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
}
then in your checkbox
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>

How do I add a row dynamically using angular js in a table?

How do I add a row dynamically using AngularJS in a table, which contains data from a get request?
I have written a code as such:
<table id="tableRow" class="table table-bordered tableRow">
<thead>
<tr>
<th></th>
<th>
<label>Make</label>
</th>
<th>
<label>Vin</label>
</th>
<th>
<label>Model</label>
</th>
<th>
<label>Parts</label>
</th>
<th>
<label></label>
</th>
<th>
<label></label>
</th>
</tr>
<thead>
</table>
now using angular js how can i add a row on click of a button or a get request in the same table...?
i had written a script which did'nt work the script is as follows..
$scope.myGet = function() {
$http.get("http://172.17.133.82:8080/restproj/v1/dealer")
.then(function(response) {
$scope.addRow = response.data;
var tall = '';
tall += '<tr>'+
'<td><button class="btn btn-danger btn-remove" type="button"><i class="glyphicon glyphicon-trash gs"></i></button</td>' +
'<td><input type="text" class="form-control" id="makeid" ng-model="addRow.make"></td>' +
'<td><input type="text" class="form-control" id="vinid" ng-model="addRow.vin"></td>'+
'<td><input type="text" class="form-control" id="modalid" ng-model="addRow.model"></td>' +
'<td ng-repeat="part in addRow.parts"><input type="text" class="form-control" id="partsid" ng-model="addRow.name"><input type="text" class="form-control" id="partsid" ng-model="addRow.desc"></td>' +
'</tr>';
$('#tableROW').append(tall);
});
I get error such as :
tabelform.html:320 Uncaught SyntaxError: Unexpected end of input
angular.min1.5.9.js:6 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=myApp&p1=Error%3A%2…Ic%20(http%3A%2F%2F127.0.0.1%3A63139%2Fjs%2Fangular.min1.5.9.js%3A21%3A332)(…)

You probably want to bind your table to a backing list and use ng-repeat to build up your table dynamically:
<div ng-app="myApp" ng-controller="carCtrl">
<table>
<tr ng-repeat="car in cars">
<td>{{ car.make }}</td>
<td>{{ car.vin }}</td>
<td>{{ car.model }}</td>
</tr>
</table>
</div>
Your corresponding Angular script would look something like:
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://172.17.133.82:8080/restproj/v1/dealer")
.then(function (response) {
$scope.cars = response.data.records;
});
});
</script>
Or if you want to add cars whenever you get an ajax response you could push them to a list (or concat the existing list, or whatever fits your case)
$scope.cars.push(response.data.records)
Angular has 2-way data binding, so if it sees that the backing list changed (e.g. by adding extra cars in the list), it will update your table dynamically.

I have created A JS Fiddle For This please Refer it
Refer This Example
In JS
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest()
}).success(function(data, status) {
$scope.people= $scope.people.concat(data);
});
In HTML
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<p> Click <a ng-click="loadPeople()">here</a> to load more data.</p>
<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.id}}</td>
<td>{{person.firstName}}</td>
<td>{{person.lastName}}</td>
</tr>
</table>
</div>
</div>

angularjs data is not showing in table

I am creating a web app in which I am using angularjs for SQL connectivity.
I have two users (admin,Regional Partner Manager) data of admin is showing properly on my table but data of Regional Partner manager Is Not showing.
Here is my js file:
$scope.getsonvindata = function () {
$scope.loadimage = true;
$scope.names = '';
$scope.resetfilters();
//$scope.area = location;
// get sonvin data list and stored in sonvinrpm $scope variable
$http.get('/angularwebservice/frmcosonvinrpm4.asmx/frmsonvinrpm', {
params: {
log: log,
from: $scope.from,
to: $scope.to,
pm: pm
}
})
.then(function (response) {
$scope.sonvinrpm = response.data.procompanysonVin;
console.log($scope.sonvinrpm);
//pagination
$scope.totalItems = $scope.sonvinrpm.length;
$scope.numPerPage = 50000;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.sonvinrpm.indexOf(value);
return (begin <= index && index < end);
};
$scope.loadimage = false;
if ($scope.sonvinrpm == '') {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}
else {
$scope.errormessage = '';
}
});
My table:
<table id="table" class="table table-bordered font" style="width: 110%;">
<thead>
<tr class="bg-primary">
<th>Edit</th>
<th>SrNo</th>
<th>Date</th>
<th>Hotel/School</th>
<th>Venue</th>
<th>Zone</th>
<th>Location</th>
<th>Start Time</th>
<th>Brand Name</th>
<th>Program</th>
<%--<th>Count</th>--%>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<td><i class="glyphicon glyphicon-filter"></i></td>
<td></td>
<%--<th>SonvinId</th>--%>
<td>
<div class="left-margin form-control-wrapper form-group has-feedback has-feedback">
<input type="text" class="date floating-label erp-input" ng-model="search.date" placeholder="Date">
</div>
</td>
<td>
<input type="text" ng-model="search.venuename" placeholder="Hotel/School" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.venue" placeholder="Venue" class="erp-input" />
</td>
<%--<th>Day</th>--%>
<%--<th>Company</th>--%>
<td>
<input type="text" ng-model="search.zone" placeholder="Zone" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.location" placeholder="Location" class="erp-input"></td>
<td>
<%--<div class="form-control-wrapper"> id="time"--%>
<input type="text" ng-model="search.starttime" class="floating-label erp-input" placeholder="Start Time">
<%--</div>--%>
</td>
<%-- <th>End</th>--%>
<%--<th>Hrs</th>--%>
<td>
<input type="text" ng-model="search.brand" placeholder="Brand Name" class="erp-input" /></td>
<td>
<input type="text" ng-model="search.program" placeholder="Program" class="erp-input" /></td>
</tr>
<%--| filter :{date: mddate,brand: mdbrand, zone: mdzone, location: mdlocation, starttime: mdstart,program: mdprogram,venuename: mdvenuename,venue: mdvenue }--%>
<tr ng-repeat="x in sonvinrpm | orderBy:predicate:reverse | filter:paginate| filter:search">
<td><button type="button" ng-click="getassigntrainerdata(x)" class="btn btn-sm btn-primary" data-controls-modal="modal-from-dom" data-backdrop="static" data-keyboard="true" data-toggle="modal" data-target="#assigntrainermodel"><i class="glyphicon glyphicon-pencil"></i></button></td>
<td>{{x.srno}}</td>
<%--<td>{{x.sonvinid}}</td>--%>
<td>{{x.date}}</td>
<td class="bg-success"><a ng-bind="x.venuename" ng-click="DetailsFunction(x)" class="erp-table-a" data-controls-modal="modal-from-dom" data-backdrop="static" data-keyboard="true" data-toggle="modal" data-target="#Detailsmodel"></a></td>
<td>{{x.venue}}</td>
<%-- <td>{{x.day}}</td>--%>
<%--<td>{{x.company}}</td>--%>
<td>{{x.zone}}</td>
<td>{{x.location}}</td>
<td>{{x.starttime}}</td>
<%--<td>{{x.endtime}}</td>--%>
<%--<td>{{x.hrs}}</td>--%>
<td>{{x.brand}}</td>
<td>{{x.program}}</td>
<%--<td>count</td>--%>
</tr>
<tr>
<td colspan="12"><pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage" class="pagination-sm"></pagination></td>
</tr>
</tbody>
</table>
and now the data I am getting from web service for my Regional Partner Manager:
{"procompanysonVin":[{"srno":1,"sonvinid":null,"id":3401,"date":"22-10-2016","day":"Sat ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00 ","program":"HBKBH","venuename":" NARAYANA SCHOOL","venue":" SITLA ASANSOL"},{"srno":2,"sonvinid":null,"id":3400,"date":"23-10-2016","day":"Sun ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00 ","program":"HBKBH","venuename":"NARAYANA SCHOOL","venue":" BENGAL AMBUJA HOUSING COMPLEX AMBUJA DURGAPUR WEST BENGAL"}]}
the data is coming in my webservice, what is wrong here?
NOTE: data of admin is printing on my table but not of regional partner manager

First thing is i was not able to find where are you calling $scope.getsonvindata function. You are just defining function but not calling anywhere in the code. like this
$scope.getsonvindata();
Second is you have applied filters wrongly.
Here is the proper way to set order by filter.
add scope
$scope.predicate = 'venue';
$scope.reverse = true;
then add to the ng-repeat
orderBy:predicate:reverse
Here is the working link
https://jsfiddle.net/U3pVM/27907/

In the .then(function () You have set
$scope.sonvinrpm = response.data.procompanysonVin;
But while setting data in the table you have set data model as search.zone, search.location, search.date etc.
Firstly you need to correct the key for data access.
Secondly the data which you are getting from the http request is an object which contains array.
So you need to use ng-repeat (or any other iterating logic) to traverse the data for displaying in the table.
Thirdly, sonvinrpm is an object, So you need to do null or undefined check
if ($scope.sonvinrpm == '') {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}
should be replaced with
if (!$scope.sonvinrpm) {
$scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}

How can I change the innerHTML of div with a variable, inside the scope function in angular js?

I have 2 HTML pages. In my index.html page you can see products information that comes from JSON file. I need to have detail of product in detail.html page when people click on particular product. Alert can show the details but unfortunately the innerHTML of my <p> does not change, please guide me.
<div ng-app="myApp" ng-controller="AppController">
<div id="serachWrapper">
<h1 id="headerTopic">Our Products</h1>
<input id="searchInput" name="search" type="text" placeholder="Search products" ng-model="searchquery"/>
<table id="searchTable">
<thead id="tbHead">
<tr class="tbRow">
<th class="tbTopics">ID</th>
<th class="tbTopics">Name</th>
<th class="tbTopics">Color</th>
<th class="tbTopics">Type</th>
<th class="tbTopics">Capacity</th>
<th class="tbTopics">Price</th>
</tr>
</thead>
<tbody id="tbBody">
<tr class="tbRow" ng-repeat="x in myData | filter:searchquery ">
<td class="tbcontents" >{{x.id}}</td>
<td class="tbcontents">{{x.name}}</td>
<td class="tbcontents">{{x.color}}</td>
<td class="tbcontents">{{x.type}}</td>
<td class="tbcontents">{{x.capacity}}</td>
<td class="tbcontents">{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
And this is my Angular js code:
var app = angular.module('myApp', ['ngSanitize']);
app.controller('AppController', AppController);
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
$scope.go = function(item){
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
});
}

You can keep both codes in the page and to solve this with an ng-if directive
Angular ng-if directive
<body ng-app="ngAnimate">
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
</body>

Why is your $scope.go function defined inside the http.get request?
Try:
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
});
$scope.go = function(item) {
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
}

AngularJs Sort orderBy not working properly in ng-repeat

Sorting not working properly on my inputField. After clicking on the inputField column, values got sorted, but problem is sorting not correct for modified values, all values are going bottom. I'm adding model-change-blur to sort after the blur in to text box. I don't know where I'm doing wrong. After modified values.
Here is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body ng-app="app" ng-controller="myController">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center" style="width: 65px;">
<div href="#" ng-click="sortType = 'id'; sortReverse = !sortReverse">
ID <span class="glyphicon sort-icon" ng-show="sortType=='id'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
</div>
</th>
<th class="text-center" style="width: 65px;">
<div href="#" ng-click="sortType = 'checkBoxField'; sortReverse = !sortReverse">
Checked <span class="glyphicon sort-icon" ng-show="sortType=='checkBoxField'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
</div>
</th>
<th class="text-center" style="width: 61px;">
<div href="#" ng-click="sortType = 'inputField'; sortReverse = !sortReverse">
Input <span class="glyphicon sort-icon" ng-show="sortType=='inputField'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
</div>
</th>
</thead>
<tbody>
<tr ng-repeat="row in filtered = ( tableData | orderBy:sortType:sortReverse )" id="row-{{$index}}">
<td align="center" style="width: 68px;">{{row.id}}</td>
<td align="center" style="width: 68px;"><input id="checkBoxField-{{$index}}" type="checkbox" ng-model="row.checkBoxField" ng-true-value="'Y'" ng-false-value="'N'"/></td>
<td align="center" style="width: 61px;"><input id="inputField-{{$index}}" class="onlyNumber" type="text" ng-model="row.inputField" maxlength="3"style="width: 50px;" model-change-blur></td>
</tr>
</tbody>
</table>
</body>
And here is my Js file:
angular.module('app', [])
.controller('myController', function($scope) {
$scope.sortType = '';
$scope.sortReverse = false;
$scope.tableData = [];
for(i=1; i<= 8; i++){
$scope.tableData.push({"id":i,"checkBoxField": i%3==0 ,"inputField":1+i});
}
})
.directive('modelChangeBlur', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attr, ngModelCtrl) {
if (attr.type === 'radio' || attr.type === 'checkbox') return;
elm.unbind('input').unbind('keydown').unbind('change');
elm.bind('blur', function() {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
});
}
};
});
Update: Adding Images
Without sorting table looks like below:
After sorting table ascending order looks like below:
After modified 3rd row order looks like below here is issue:
Modified value going to bottom row.

your sort code is fine.. just change the input type to number..
<input id="inputField-{{$index}}" class="onlyNumber" type="number" ng-model="row.inputField" maxlength="3" style="width: 50px;" model-change-blur> </td>
you just have an empty default sort column, just change this to define a default value. you can check by clicking one of the table head column and it'll sort properly.
$scope.sortType = 'inputField';
or you can add ng-init to your table tag like.
ng-init = "sortType='inputField'"
I'd also suggest to define an order function for a cleaner markup.
// code source https://docs.angularjs.org/api/ng/filter/orderBy
$scope.sort = function(sortType) {
$scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
$scope.sortType = sortType;
};
and simply in your Markup, instead of
ng-click="sortType = 'inputField'; sortReverse = !sortReverse"
this
ng-click="sort('inputField')"
and initial code to either
ng-init = "sort('inputField')"
or
sort('inputField')
plunk

Check this one also
https://docs.angularjs.org/api/ng/filter/orderBy
I just make one function which is call when you leave from textbox.
$scope.changeData = function(predicate)
{
$scope.sortType = 'inputField'
$scope.sortReverse = true;
}
and here check how ng-blur call
<tbody>
<tr ng-repeat="row in filtered = ( tableData | orderBy:sortType:sortReverse )" id="row-{{$index}}">
<td align="center" style="width: 68px;">{{row.id}}</td>
<td align="center" style="width: 68px;">
<input id="checkBoxField-{{$index}}" type="checkbox" ng-model="row.checkBoxField" ng-true-value="'Y'" ng-false-value="'N'"/>
</td>
<td align="center" style="width: 61px;">
<input id="inputField-{{$index}}" ng-blur="changeData(sortReverse)" class="onlyNumber" type="text" ng-model="row.inputField" maxlength="3"style="width: 50px;" model-change-blur>
</td>
</tr>
</tbody>

//change syntax of ng-repeat as follows
<tr ng-repeat="row in filtered = ( tableData | orderBy:'-id' )" id="row-{{$index}}">
// add - for reverse sorting

<tr ng-repeat="row in filtered = ( tableData | orderBy:'-inputField' )" id="row-{{$index}}">