Im newbie in angularjs.
Now im having issues with a checkbox.
First: my web are paging , sorting and change page size by call api to get data from server in factory:
this.getData = function(page , sortColumm, sortType , pageSize, searchText){
$http({
method = get;
url = "api/data?page="+page +"&sortColumm=" +sortColumm +"&sortType="+sortType +"&pagesize="+pageSize+"&search="+searchText;
}).success(function (data) {
}).error(function (error) {
});
}
now i have a page using angularjs to bind data using funciton getData.
html:
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"></th>
<th>Administrator Name</th>
<th >Administrator Type</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="gladmin in gladmins" ng-switch on="gladmin.isEnabled"
on-finish-render="resizetable">
<td><input type="checkbox" ng-model="gladmin.Selected" value="{{gladmin.id}}" ng-click="selectionAdmin(gladmin.id)"></td>
<td>{{gladmin.name}}</td>
<td>{{gladmin.type}}</td>
</tr>
</tbody>
controller
app.controller('adminPage',function(){
// call getData
$scope.checkAll=function(){
// what should i write here?
// i want check all is for current page, next page checkall = fall,
// same GMAIL
}
$scope.selectionAdmin = function(id){
// what should i do here
}
})
All i want is the checkall same the checkall in gmail ? anyone help me ? please, i am new bie in this!
i find some link here : http://plnkr.co/edit/N98IKTcHoZMCs18FjSRF?p=preview
http://vitalets.github.io/checklist-model/
but it work not same i want !
It is hard for me to understand the question but I think you just want a property of ng-checked="isAllChecked" in your ng-repeat for the inputs. When that value is set to true all of them should check.
Related
Below is the classical issue which I am facing during my app development.
I have an array of JSONObjects in my spring controller that I have to iterate in the jsp;
Also another status attribute called JSONArrayStatus is set that suggests if JSON array is empty or not.
Using jquery if JSONArray is empty I will show noDataImageDiv otherwise will show tableDIV (Binding the data from JSONArray using JSTL)
The problem I am facing is as below.
1. Edit a row in the table and click on Update. At this time I make an Ajax Call say, "UpdatedUser", which will return all the records along with the updated records. I could use refresh however thats not a recommended user experience and hence a no no.
To reflect the updated users in the table, I use jquery as below
clearing table rows table.clear().draw()
Loop the result set as follows.
redraw code
function reDrawExternalContactUsers(externalUsers) {
table.clear().draw();
var row = "";
$.each(externalUsers, function (i, field) {
row = '<tr><td></td><td></td><td class="edit">edit</td></tr>';
$("#tableDIV").append(row);
});
}
afetr this redraw or refresh process
This function is NOT working
$(".edit").click(function(){
});
This function is working
$("#tableDIV .edit").click(function(){
});
Suggest a better way of refreshing table rows, if any.
<div id="tableDIV">
<table id="tableID">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
if data exist
loop{
<tr>
<td></td>
<td></td>
<td class="edit">edit</td>
</tr>
} // loops ends
if close
</tbody>
</table>
</div>
<div id="noDataImageDiv"> No data image</div>
html code :
<div id="tableDIV">
<table id="tableID">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
if data exist
loop{
<tr>
<td class="user-name"></td>
<td></td>
<td class="edit" data-user-id="">edit</td> //set user_id in attr data-user-id
</tr>
} // loops ends
if close
</tbody>
</table>
</div>
<div id="noDataImageDiv"> No data image</div>
jquery code :
you should use click event on document
$(document).on('click', '.edit', function () {
var btn = $(this);
var user_id = btn.attr("data-user-id"); //user_id of user will update
// extra user data
$.ajax({
method: "POST",
url: url,
data: {
'id': id,
// extra data to send
},
success: function (data) {
if (data.status) // successfully user updated
{
var user = data.user;
/* you can set user data like this */
btn.closest('tr').find('.user-name').html(user.name);
}
}
});
});
How do I filter through the tables and only show the ones matching the keywords the user types?
I want to be able to have multiple tables within the page, but I want to still be able to show and hide based on user input.
<!-- <table class="responsive-stacked-table with-mobile-labels tablesection">
<tr>
<th>Submitted By</th>
<th>Egg or Nestling?</th>
<th>How Many?</th>
<th>Location</th>
<th>Description of Nest</th>
<th>Possible Species?</th>
<th>Edit // Delete</th>
</tr> -->
<br><table class="responsive-stacked-table with-mobile-labels tablesection">
<tr>
<th>Submitted By</th>
<th>Date Submitted</th>
<th>Egg or Nestling?</th>
<th>How Many?</th>
<th>Location</th>
<th>Description of Nest</th>
<th>Possible Species?</th>
<th>Edit // Delete</th>
</tr><tr><td data-label='Submitted By:' ><img src='images/profilepics/levi.jpg'class= 'img-circle submittedbypicture' > <br>partymo</td><td data-label='Date Submitted:' ><br> Last Edited: <br> </td><td data-label='Egg or Nestling:' >egg</td><td data-label='How Many:'>3</td><td data-label='Location:'>$nest['profilepicfile']</td><td data-label='Description:'>$nest['profilepicfile']</td><td data-label='Possible Species:'>edit if you know!</td><td>Edit // Delete</td></tr></table><br><br><br><br><table class="responsive-stacked-table with-mobile-labels tablesection">
<tr>
<th>Submitted By</th>
<th>Date Submitted</th>
<th>Egg or Nestling?</th>
<th>How Many?</th>
<th>Location</th>
<th>Description of Nest</th>
<th>Possible Species?</th>
<th>Edit // Delete</th>
</tr><tr><td data-label='Submitted By:' ><img src='images/profilepics/rubert.jpg'class= 'img-circle submittedbypicture' > <br>robster</td><td data-label='Date Submitted:' >2017-08-09<br> Last Edited: <br> 2017-08-11</td><td data-label='Egg or Nestling:' >nestling</td><td data-label='How Many:'>4</td><td data-label='Location:'>4</td><td data-label='Description:'>really big. </td><td data-label='Possible Species:'>edit if you know!</td><td>Edit // Delete</td></tr></table><br><br><br>
If I understand correctly, you basically want tables that can be filtered using a textbox?
If you're thinking js-based client-side filtering, and you're fine using jQuery, you could set up your HTML like so:
<input type="textbox" class="fitler-input" data-for="filterable-table1">
<table id="filterable-table1">
...
</table>
then you could use jQuery to do something like
<script type="text/javascript">
function filterfunction(tablerow,testvalue) {
// sample filter: include rows where any cell contains the testvalue text
return tablerow.text().toLowerCase().indexOf(testvalue.toLowerCase()) > -1;
}
jQuery(function($){
$(".filter-input").each(function(){ // start by iterating all filter textboxes
var $filter = $(this); // select the filter
var $table = $("#"+$filter.data("for")); // select this filter's table
$filter.on("change keydown keyup keypress", function(){ // whenever user types in box,
setTimeout(function(){ // timeout makes the value retrieval more instant
var $rows = $table.find(">tr, >tbody>tr"); // get all table rows
var value = $filter.val(); // get this filter's new value
$rows.each(function(){ // go through all rows, and test against filter
var $row = $(this); // get this row
if(filterfunction($row,value)) // test this row
$row.show(); // it matches
else
$row.hide(); // it doesn't match
});
},1);
});
});
});
</script>
This would also be something you could do in vanilla js (i.e., using no libraries), but it'd take a bit more time and code.
And here's a JSFiddle to demonstrate it in action.
EDIT:
Just my opinion, but:
As per #Peter-Rakmanyi's comment, if your site / webapp / interface is heavily data-driven, and you plan on having a lot of HTML manipulation based on user input, AngularJS might be something you should consider looking into. It would require a little refactoring of your HTML (which might mean some php tweaks), but it may be worth it.
If this is one of only a few small cases you'll need filtering for, you can probably just get away with using jQuery.
I am creating a golf tournament check-in app and want to be able to update an individual record in the MySQL database when a checkbox is clicked. So, when someone checks in they click the checkbox by their name and I want it to then update the database record of that person (the checked in column set to 1 for the specific id of the person) so that others can see that the person is checked in almost immediately.
I am not sure how to get both the id and the checkedin value to update only the affected record when a checkbox is clicked.
app.js
var checkinApp = angular.module('checkinApp', []);
checkinApp.controller('checkinController', function($scope, $http, $location, $anchorScroll) {
$http.get('lib/api.php').success(function(data) {
$scope.checkindata = data;
});
$scope.processForm = function(checkedindata) {
$http.post('lib/process.php', { gid : checkedindata.gid, checkedin : checkedindata.checkedin })
.then(function(data) {
console.log(data);
})
};
});
HTML/Output
<table class="table table-striped table-responsive">
<tbody>
<tr>
<th>Checked In</th>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>Starting Hole</th>
</tr>
<tr ng-repeat="item in checkindata">
<td><input type="checkbox" name="checkedin" ng-model='checkedin' ng-change='processForm(checkedindata)' ng-checked="item.checkedin == 1"/></td>
<td>{{item.fname}}</td>
<td>{{item.lname}}</td>
<td>{{item.cname}}</td>
<td>{{item.hole}}</td>
</tr>
</tbody>
</table>
process.php
<?php
require_once('../includes/cred.php');
$checkedin = $_POST['checkedin'];
$sth = $dbh->prepare("UPDATE golfers SET checkedin=$checkedin");
$sth->execute();
DB Table
DB Table
Output
Output
Simply replace ng-change='processForm(checkedindata)'
by ng-change='processForm(item)'
and in your PHP code do something like :
$sth = $dbh->prepare("UPDATE golfers SET checkedin=$checkedin->checkedin WHERE gid=$checkedin->gid");
I'm creating a custom directive called ngSortable that can use the orderBy filter on an array when the element is clicked. I've stepped through and confirmed the array is being sorted correctly, but the view is not updating. The filter is wrapped in scope.$apply(), so I'm not sure why it doesn't update. I've also put a scope.$watch on the array to see if the change was being broadcast and the $watch doesn't catch anything. I'm using jquery click event listener if that makes any difference. If anyone can help me figure out what I'm doing wrong here I would greatly appreciate it.
HTML
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th ng-sortable="policyAcordTypes" enable-multiple="true" data-field="description" style="width: 40%;">Acord Type</th>
.....
</tr>
</thead>
<tbody>
<tr ng-repeat="item in policyAcordTypes" >
<td style="width: 40%; min-width: 140px">
<div>{{item.description}}</div>
</td>
....
</tr>
</tbody>
Javascript
scope.$apply(function () {
$filter('orderBy')(scope.$eval(attr.ngSortable), 'description');
});
And I've tried this...
Javascript
scope.$apply(function () {
var list = scope.$eval(attr.ngSortable);
list = $filter('orderBy')(scope.$eval(attr.ngSortable), 'description');
});
$filter('orderBy') does not modify the passed in array, it returns a new ordered array. You need to assign the returned array back to the scope's property.
Instead of using scope.$eval(attr.ngSortable), you should use [] operator (standard javascript)
Try:
scope.$apply(function () {
scope[attr.ngSortable] = $filter('orderBy')(scope[attr.ngSortable], 'description');
});
DEMO (clicking on the header will sort the row)
First of all, thank you a lot for what you are doing here. That is very nice.
I am developing a web application with Dojo, and I am facing a problem with ordering my rows in a dojox.grid.EnhancedGrid.
Let's say i have a product with product status, my JSON file looks like:
[
{"id":1,"name":"Car A","price":"1000","productstatus":{"id":1,"name":"new"}},
{"id":2,"name":"Car B","code":"2000","productstatus":{"id":2,"name":"old"}}
]
I want to put that data in my grid and change the order of the rows by clicking in the header.
I have in my HTML file:
<table id="lstProduct" jsId="lstProduct" dojoType="dojox.grid.EnhancedGrid" >
<thead>
<tr>
<th field="id">Id</th>
<th field="name" width="100px">Name</th>
<th field="price" width="100px">Price</th>
<th field="id" formatter="formatterStatus">Status</th>
</tr>
</thead>
</table>
and my Javascript file:
dojo.addOnLoad(function() {
productStore = new dojo.data.ItemFileReadStore({data: { items: ${products} }});
dijit.byId("lstProduct").setStore(productStore);
});
// formatter
function formatterStatus(val, rowIndex) {
return lstTasks.getItem(rowIndex)['productstatus'][0]['name'];
}
The problem? I cannot order by status (status's name), it only orders by product.id when I click in the status header.
Any workaround for that?
Thanks in advance.
I believe you need to add clientSort="true" to enable client-side sorting. Add this to the <table> declaration.