I need one help.I need some selected value using check box select using Angular.js.I am explaining my code below.
<tr dir-paginate="pro in listOfReview | itemsPerPage:5">
<td><input type="checkbox" ng-model="selected[pro.review_id]" ng-false-value="undefined"></td>
<td>{{$index+1}}</td>
<td>{{pro.Product_name}}</td>
<td>{{pro.title}}</td>
<td>{{pro.description}}</td>
<td>{{pro.rating}}</td>
<td ng-if="pro.status==0">Not Approved</td>
<td ng-if="pro.status==1">Approved</td>
<td ng-if="pro.status==1">
<a ui-sref="review">
<input type='button' class='btn btn-xs btn-red' value='Reject' ng-click="RejectStatus(pro.review_id,pro.status);" >
</a>
</td>
<td ng-if="pro.status==0">
<a ui-sref="review">
<input type='button' class='btn btn-xs btn-green' value='Approve' ng-click="ApproveStatus(pro.review_id,pro.status);" >
</a>
</td>
</tr>
<input type='button' class='btn btn-xs btn-green' value='Approve' ng-click="ApproveStatus();">
The controller side code is given below.
$scope.selected = {};
$scope.ApproveStatus=function(){
console.log('approve',$scope.selected);
}
right now i am getting the selected value like this approve Object {4: true} .Here i need to assign pro.review_id value to a key like(review:id:4) so that i can easily fetch those using loop.Here also my requirement is when at least one check box will select the Approve button present at bottom will display to the user.Please help me.
plunker link Click here
You can bind an extra property with check box like I did below.
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<table>
<tr><td></td><td>Name</td><td>Type</td><td>Price</td></tr>
<tr ng-repeat="p in prods">
<td><input type='checkbox' value ="p.checked" ng-model="p.checked"></td>
<td>{{p.name}}</td>
<td>{{p.type}}</td>
<td>{{p.price}}</td>
<td>Delete</td>
<td>Modify</td>
</tr>
</table>
<input type="button" value="Approve" ng-click="ApproveStatus()" />
</div>
</body>
</html>
function Ctrl($scope) {
$scope.prods = [
{'id':'0', 'name' : 'Title1', 'type' : 'Zip code', 'price' : '11'},
{'id':'1', 'name' : 'Title2', 'type' : 'MD', 'price' : '222'},
{'id':'2', 'name' : 'Title3', 'type' : 'DMS', 'price' : '2222'}
];
$scope.ApproveStatus = function(){
console.log('value is:' + $scope.prods.length);
for(var i =0; i < $scope.prods.length ;i++){
if($scope.prods[i].checked){
console.log($scope.prods[i].id)
}
}
};
}
Related
<tr>
<td>Name:</td>
<td><span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></td>
</tr>
I have this, what kind of javascript do I need in order to hide the span and let the input show? This should be done by clicking this edit button:
<i class="glyphicon glyphicon-edit"></i>
I have checked other questions on this site for duplication, but I tried alot and none answered my question!
<html>
<head>
<script>
function showMe(){
document.querySelector('#change').style.display = ''; //Show the input
document.querySelector('#keep').style.display = 'none' //Hide the span
}
</script>
</head>
<body>
<tr>
<td>Name:</td>
<td>
<span id = 'keep'>Username</span>
<input id = 'change' value= 'Name' style= 'display:none;'>
</td>
</tr>
<a href = '#' data-original-title = 'Edit this user' data-toggle = 'tooltip' type = 'button' class='btn btn-sm btn-warning' onclick = 'showMe()'><i class = 'glyphicon glyphicon-edit'>click me</i></a>
</body>
</html>
Use This Simple Code
first add library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
your html code
<i class="glyphicon glyphicon-edit"></i>edit
<span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></span>
and use script
<script>
$(document).ready(function(){
$("a").click(function(){
$(" #change").toggle();
$("#keep").hide();
});
});
</script>
I am trying to autopopulate an input field (location-name) with the value entered in another field (location-address). I have looked online everywhere and managed to make the JS snippet work on a straightforward example, but for some reason this is not working with the following php code.
Just to clarify, I would like the value entered in "location-address to be passed to "location-name".
<script>
$('#location-address')
.keyup(function() {
var value = $(this).val();
$('#location-name').text(value);
})
.keyup();
</script>
<tr class="em-location-data-name">
<th style="padding-top: 14px;">
<?php _e ( 'Event unique identifier:', 'dbem' )?>
</th>
<td>
<input id="location-name" type="text" name="location_name" />
</td>
</tr>
<tr class="em-location-data-address">
<th style="padding-top: 14px;">
<?php _e ( 'Address:', 'dbem' )?> </th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>
Firstly your code needs to be placed in a document.ready handler. Secondly, you need to use val() not text() to set the value of an input field.
$(function() {
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val(value);
}).keyup();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="em-location-data-name">
<th style="padding-top: 14px;">
<?php _e ( 'Event unique identifier:', 'dbem' )?>
</th>
<td>
<input id="location-name" type="text" name="location_name" />
</td>
</tr>
<tr class="em-location-data-address">
<th style="padding-top: 14px;">
<? php _e( 'Address:', 'dbem') ?>
</th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>
</table>
You need to wrap your jQuery code in $(document).ready(); so that jQuery binds all HTML elements.
Corrected code:
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
}).keyup();
</script>
Use this
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
});
</script>
The design of my page has a form comprising a textbox at the top contained in a div element. Beneath that I have datatable with a checkbox in each row of the table. This entire form is in turn contained in another div element around it.
In this case, whenever I submit the form with some value in the textbox above and selecting one of the rows by checking the checkbox, the checkbox value is not getting passed through the form submission.
If I remove the div element around the textbox above and put the entire form
in a single big div, it works. However, I have constraint here that I can not
remove the inner div containing the textbox. I can not explain why I have such constraint since this is just a simplified and to-the-point version of my requirement.
I am also including the CGI Perl code along with a runnable code below, in the form action just the current script only needs to be called :
enter code here
use CGI;
use CGI::Carp qw(fatalsToBrowser);
my $qry = new CGI;
&main();
sub main {
$qry->header();
my $body = &display_page();
print $body;
}
sub display_page {
my $url = "current_script.cgi";
print '<pre>' . Data::Dumper::Dumper( \%{$qry->Vars}) . '</pre>';
my $checked1 = "checked" if defined $qry->param('First') || '' ;
my $checked2 = "checked" if defined $qry->param('Second') || '' ;
my $checked3 = "checked" if defined $qry->param('Third') || '' ;
my $html .= qq{<br>
<div>
<div>
<form name='myForm' action='$url' method=post>\n};
$html .= $qry->textfield(-name=>'TEXT_FIELD',
-default=>'Enter your text here',
-size=>35,
-maxlength=>50);
$html .= "<br><br> </div>";
$html .= qq{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css'>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src ="/js/testchkbox.js"></script>
};
$html .= qq{
<table width = "90%" border="1" >
<tr>
<td>
<div class="container" >
<table id = "test" class="display compact cell-border table-bordered stripe row-border order-column" width="100%">
<thead>
<tr bgcolor="skyblue">
<td>Check</td>
<td>Name</td>
<td>DOB</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name = "Second" value = "1st" $checked1></td>
<td>Mark</td>
<td>11-22-15</td>
<td>London-101</td>
</tr>
<tr>
<td><input type="checkbox" name = "Second" value = "2nd" $checked2 ></td>
<td>Sam</td>
<td>11-22-15</td>
<td>London-101</td>
</tr>
<tr>
<td><input type="checkbox" name = "Second" value = "3rd" $checked3></td>
<td>John</td>
<td>11-22-15</td>
<td>London-101</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
};
$html .= <<END;
#{[ $qry->submit(-name=>'STORE', -value=>'Submit') ]}
END
$html .= "</form><br></div>";
return $html;
}
https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
$(document).ready(function(){
var table = $('#test').DataTable({
bInfo: true,
bSort: true,
bFilter: true,
scrollX: '100%',
scrollY: '475px',
paginate: false,
scrollCollapse: true,
dom: '<"toolbar">frtip',
oLanguage: {
"sSearch": "Search"
},
});
/* client side csv export button */
new $.fn.dataTable.Buttons(table, {
buttons: [{
extend: 'csvHtml5',
text: 'Export',
className: 'export btn btn-sm btn-success'
}]
});
/* add the button to the div with class name toolbar */
table.buttons().container().find("a").removeClass( 'btn-default' );
table.buttons().container().appendTo( $('div.toolbar') );
/* use the below button in case we need to fetch the data from server side */
/*
var bootstrapButton = "title='Export data into CSV' class='export btn btn-sm btn-success' role='button'"
$("div.toolbar").html("Export");
*/
});
https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css
<pre>$VAR1 = {};
</pre><br>
<div>
<div>
<form name='myForm' action='current_script.cgi' method=post>
<input type="text" name="TEXT_FIELD" value="Enter your text here" size="35" maxlength="50" /><br><br> </div>
<table width = "90%" border="1" >
<tr>
<td>
<div class="container" >
<table id = "test" class="display compact cell-border table-bordered stripe row-border order-column" width="100%">
<thead>
<tr bgcolor="skyblue">
<td>Check</td>
<td>Name</td>
<td>DOB</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name = "Second" value = "1st" ></td>
<td>Mark</td>
<td>11-22-15</td>
<td>London-101</td>
</tr>
<tr>
<td><input type="checkbox" name = "Second" value = "2nd" ></td>
<td>Sam</td>
<td>11-22-15</td>
<td>London-101</td>
</tr>
<tr>
<td><input type="checkbox" name = "Second" value = "3rd" ></td>
<td>John</td>
<td>11-22-15</td>
<td>London-101</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
<input type="submit" name="STORE" value="Submit" />
</form><br></div>
You can't write your html like this:
<div>
<form name='myForm' action='current_script.cgi' method=post>
<input type="text" name="TEXT_FIELD" value="Enter your text here" size="35" maxlength="50" /><br><br>
</div>
This breaks the code. Your browser doesn't really know where the form ends and therefore the checkboxes don't get submitted.
If you need a div around your "textbox", put it around your "textbox" like this:
<div>
<input type="text" name="TEXT_FIELD" value="Enter your text here" size="35" maxlength="50" /><br><br>
</div>
In general check your html for syntax errors (https://validator.w3.org/).
I am getting the following error while i have no data using ng-repeat in Angular.js
Error:
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.6/ngRepeat/dupes?p0=user%20in%20objHodUserData&p1=string%3Al&p2=l
at Error (native)
at http://oditek.in/Gofasto/js/angularjs.js:6:416
at http://oditek.in/Gofasto/js/angularjs.js:279:39
at Object.fn (http://oditek.in/Gofasto/js/angularjs.js:129:128)
at n.$digest (http://oditek.in/Gofasto/js/angularjs.js:130:206)
at n.$apply (http://oditek.in/Gofasto/js/angularjs.js:133:236)
at g (http://oditek.in/Gofasto/js/angularjs.js:87:376)
at K (http://oditek.in/Gofasto/js/angularjs.js:91:448)
at XMLHttpRequest.z.onload (http://oditek.in/Gofasto/js/angularjs.js:92:462)
I am explaining my code below.
<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData ">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >
</a>
</td>
</tr>
</tbody>
When the object objHodUserData has no data these type error is coming.I tried to resolve this by using track by $index. By using this error has gone but 4 blank rows are generating.Here i need when there is no data present no rows will generate without any error and when data will be there it will display.Please help me to resolve this error.
I had the same problem, and I solved it by wrapping all the <tbody> within a <div> element.
and inserting ng-show in this div element like that
<div ng-show="hasElements()">
and in your controller you have a $scope function to check if there is elements in the object like that:
$scope.hasElements = function(){
return objHodUserData.length ===0;
}
and that should work.
let me if it solved your problem.
Cheers.
Try using ng-if along with ng-repeat.It should be ng-if="objHodUserData.length !=0"
If you don't mind using lodash, then this is a handy utility library for your javascript, which can help with tasks like this.
var objHodUserDataWithoutBlanks = _.filter(objHodUserData, function(n) {
return n.user_name != "";
});
The above will filter out entries that have a blank username. Then your ng-repeat can instead repeat over this object without blanks: objHodUserDataWithoutBlanks.
Edit: Alternate method using only angularjs:
Add an angular filter:
myApp.filter('nonBlankOnly', function() {
return function( items) {
var filtered = [];
angular.forEach(items, function(item) {
if(item.user_name != "") {
filtered.push(item);
}
});
return filtered;
};
});
Then apply the filter in your controller:
function myCtrl($scope, $filter)
{
$scope.objHodUserDataWithoutBlanks = $filter('nonBlankOnly')(objHodUserData);
}
And repeat through filtered items:
<tr ng-repeat="user in objHodUserDataWithoutBlanks">
Maybe you can use de ng-show to check if there is an existing user, something like:
<tr ng-repeat="user in objHodUserData ">
<td ng-show="user">{{$index+1}}</td>
<td ng-show="user">{{user.user_name}}</td>
<td ng-show="user">{{user.email}}</td>
<td ng-show="user">{{user.mob_no}}</td>
<td ng-show="user">{{user.login_name}}</td>
or if you prefer to hide the entire row, put the ng-show on the <tr> element.
<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData " ng-show="user">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >
</a>
</td>
</tr>
</tbody>
I have a list page displaying customer information and in each row of customers there is a Select box with some options like Edit, Cancel, Delete etc. The customers are displayed using ng-repeat directive and the select box with above mentioned options are implemented using ng-options.
I tried to get the value of selected item from drop down against each row, but it is not working, the code worked when I pasted the select box code snippet outside the loop.
Here is my code to display the customers
<table class="table display table-striped table-bordered" ng-table="tableParams">
<tr ng-repeat="customer in $data | filter: search | filter :name">
<td data-title="'Reseller ID'" sortable="'ResellerId'" >
{{customer.ResellerId}}
</td>
<td data-title="'Reseller Name'" sortable="'ResellerName'">
{{customer.ResellerName}}
</td>
<td data-title="'Customer ID'" sortable="'CustomerID'">
{{customer.CustomerID}}
</td>
<td data-title="'Customer Name'" sortable="'CustomerName'">
{{customer.CustomerName}}
</td>
<td data-title="'Status'" sortable="'Status'">
{{customer.Status}}
</td>
<td data-title="'Available Funds'" sortable="'AvailableFunds'">
{{customer.AvailableFunds}}
</td>
<td data-title="'Created Date'" sortable="'CreatedDate'">
{{customer.CreatedDate}}
</td>
<td>
<form name="statusForm">
<select class="form-control status" ng-model="actionslist" name="actions" ng-options="action.name for action in action_options" ng-change="editCustomer()">
<option value="">Select Action</option>
</select>
</form>
</td>
<td><i class="fa fa-desktop"></i> <i class="fa fa-rss"></i> <i class="fa fa-sign-in"></i> </td>
</tr>
</table>
Here is my Angular code
var CustomerController = function ($scope, $filter, $http, ngTableParams) {
$scope.action_options = [{
name: 'Edit',
value: 'edit'
}, {
name: 'Suspend',
value: 'suspend'
}, {
name: 'Cancel',
value: 'cancel'
}, {
name: 'Delete',
value: 'delete'
}, {
name: 'Reset Password',
value: 'reset'
}];
$scope.editCustomer = function () {
//$scope.itemList=[];
alert($scope.item.value);
//alert($scope.selected.actions);
}
}
Could anyone tell me what is the mistake I'm doing here ?
It will be saved through your ng-model
$scope.editCustomer = function () {
alert($scope.actionslist);
}
working fiddle
Try this:
<select ng-model="action" ng-options="obj.value as obj.name for obj in action_options"></select>
and check out this answer https://stackoverflow.com/a/12140310/1530725