|
You can overload the standard Array.sort() in the same manner as a standard comparative operation.
The problem that you have is that your rows are not properly formatted for JSON (it looks like your data value should be an object, not an array) and you're mixing strings and integers. If you ONLY want to group by 1 field that's easy, if you want flexibility then you'll have a more complicated operation on your hands. One sort function will not be suitable for your needs, since string comparisons in Javascript will give you wonky results when used on stringified numbers, and using numerical comparisons on strings will also give bad data.
Array.prototype.sort() - JavaScript | MDN[^] has a bunch of suggestions for how to handle sorting of various data types and uses vanilla Javascript.
|
|
|
|
|
I have an AngularJS view that contains a ng-grid row cellTemplate icon button. The problem only happens in IE and not in Google Chrome. When the user selects the icon button a ngDialog is opened and on the dialog close event the dialog closes then the selected icon button increases in size in the cell and all of the text in that row shifts up and to the left. I have tested this in Google Chrome and the problem does not occur. What I am seeing is that the entire browser seems to do a shift to the right then back when I do close the dialog. It was recommended to me that on dialog close I close the dialog then redirect to a dummy view which redirects back to reload the view with ng-grid. I tried that but am unable to get working.
The dialog definition, and the cellTemplate markup the contains the icon button that calls the open dialog event is shown below along with the dialog open and close event
<script type="text/ng-template" id="ApproverCommentsDialog">
<div class="ngdialog-message">
<h3>Approver Comments</h3>
<p>
({ApproverComment}}
</p>
</div>
<div id="gridDiv" class="ngdialog-buttons">
<button type="button" ng-click="OKClicked()" class="ngdialog-button ngdialog-button-primary">OK</button>
</div>
</script>
var = cellTemplateIconWithTooltip = '<div class="ngCellText" ng-class="col.colIndex() - 1"><a title="Show" ng-click="displayComments(row.entity)"><img src="../../../../Content/images/managerequests.png" style="float: right; padding:5px; border:3px" height="20px" width="20px" /></a></div>';
$scope.displayComments = function (row) {
$scope.ApproverComment = row.ApproverComments;
ngDialog.open({
template: 'ApproverCommentsDialog',
className: 'ngdialog-theme-default',
data: row.ApproverComments,
scope: $scope
});
};
$scope.OKClicked = function () {
ngDialog.close();
};
Any help would be great.
modified 14-Mar-16 12:12pm.
|
|
|
|
|
Angular is designed to operate completely on AJAX. If you find yourself doing post-backs as a workaround, something significant is wrong.
In this case, what your seeing sounds like a basic CSS issue.
In your local .css file add:
.ngdialog-theme-default{
overflow: auto !important;
}
I had a similar problem with bootstrap alerts that was resolved by adding an overflow handler to the alert class.
|
|
|
|
|
i am quite new in angular and still learning. so just found today angular.bootstrap function it run ng code manually.
i do not understand what kind of angular js code we need to run manually by angular.bootstrap function and which code does not require angular.bootstrap function to run manually.
so just tell me what to look for in code to identify that code can run or we need to use angular.bootstrap function to run the code. please discuss with example. thanks
tbhattacharjee
|
|
|
|
|
If you're just starting with Angular, you don't need this function. This is to load a different Angular application, which has some very specific use cases, but is not something you should worry about as yet.
The flow for getting Angular up in a page is:
- Add an ng-app attribute to the html tag
<html ng-app="myApp"> - Have a script file that defines myApp
angular.module('myApp',[]); - Include the primary Angular script
- Include your script that defines 'myApp' (or have a script block that defines it, as below)
Here's a basic working sample:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myController',['$scope',function($scope){
$scope.title = 'Welcome to MyApp!';
}]);
</script>
</head>
<body ng-controller="myController">
<h2>
{{title}}
</h2>
</body>
</html>
|
|
|
|
|
thanks for reply but my question was different.
i try to know that how do i know which angular code need to run with the help of angular.bootstrap function ?
some time angular code can run without the help of angular.bootstrap function and some time required the help from angular.bootstrap function.
so if i get any angular code then how do i detect that code need help angular.bootstrap function to run........would u discuss it.
thanks
tbhattacharjee
|
|
|
|
|
I did answer that question, no Angular code REQUIRES angular.bootstrap.
If you've loaded your app via ng-app then you're good to go. If you did not give a tag the ng-app attribute, then you need it. All it does is load an application module, that's it. Your module should include its requirements as part of the Angular DI system, and unless you have a masochistic tendency there's no reason to separate the Angular structure from the HTML document(provided it's yours to manage).
When you might use it:
If you're injecting angular into a template that doesn't have a suitable place for an ng-app tag then you need it. If you're delivering an application via CDN and will not have control over the end usage, then you might need it. That's all I've got off the top of my head before my first cup of coffee.
|
|
|
|
|
i gave you up vote for your explanation.
you said : When you might use it:
If you're injecting angular into a template that doesn't have a suitable place for an ng-app tag then you need it. If you're delivering an application via CDN and will not have control over the end usage, then you might need it. That's all I've got off the top of my head before my first cup of coffee.
it would be nice if you explain what u said above with code and example. i am new in angular so i may understand things with code and explanation. if possible please come with 3rd time for the same with some code which help me to understand when we need angular.bootstrap function and when angular.bootstrap function is not require to run the code. thanks a lot 
tbhattacharjee
|
|
|
|
|
Those aren't Angular-specific, just web development strategies. Here's my advice, don't use angular.bootstrap. Forget it exists, it'll only confuse you. Just attach ng-app to the html tag, it's much easier to learn using the framework in that manner.
The examples that I provided are more architectural than implementation, which is why there's not much point to sample code.
References:
Web template system[^]
Content delivery network[^]
|
|
|
|
|
Please give me some solution for that.
Thank you
|
|
|
|
|
tienich wrote: Please give me some solution for that.
Study the software documentation for the device.
|
|
|
|
|
|
If the hardware API happens to have a JavaScript interface then great!
If it does not, which would be the normal state of affairs, you'll need to build a middleware webservice that interfaces with the driver. Likely candidates for the middleware language are C-family or Java.
|
|
|
|
|
|
The following is my js code which gives me database error alert as "undefined". Kindly give me suggestion
var db;
var dbCreated = false;
var scroll = new iScroll('wrapper', {
vScrollbar : false,
hScrollbar : false,
hScroll : false
});
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var firstName = document.getElementById("usernamesignup").value;
var email = document.getElementById("emailsignup").value;
var password = document.getElementById("passwordsignup").value;
var conpassword = document.getElementById("passwordsignup_confirm").value;
//var password = document.getElementById("psw").value;
db = window.openDatabase("RegistrationDB", "1.0", "Registration", 200000);
/*if (dbCreated){
// alert("123");
}
else{*/
db.transaction(populateDB, transaction_error, populateDB_success);
}
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS Registration');
var sql = "CREATE TABLE IF NOT EXISTS Registration ( "
+ "firstName VARCHAR(50), " + "email VARCHAR(50), "
+ "password VARCHAR(50), " + "conpassword VARCHAR(50))";
tx.executeSql(sql);
var firstName = document.getElementById("usernamesignup").value;
var email = document.getElementById("emailsignup").value;
var password = document.getElementById("passwordsignup").value;
var conpassword =document.getElementById("passwordsignup_confirm").value;
// var pwrd = document.getElementById("psw").value;
tx.executeSql("INSERT INTO Registration (firstName,email,password,conpassword) VALUES ('"+ usernamesignup +"','"+ emailsignup +"' , "+ passwordsignup+", '"+ passwordsignup_confirm+"' )");
}
function transaction_error(tx, error) {
alert("Database Error: " + error);
}
function populateDB_success() {
dbCreated = true;
// where you want to move
alert("Successfully inserted");
window.location="file:///android_asset/www/login.html";
}
|
|
|
|
|
|
|
I have a ng-grid that I am trying create a wrap-text column for a column that contains multiple lines of comment text. I have been trying everything today that I can find on the internet and still can't find a solution. I want to show you my code and if someone can tell me a better way of doing this that would be a great help.
.gridStyle4 {
border: 1px solid #dfdfdf;
overflow-y: scroll;
}
<div style="margin-top:100px;">
<hr style="height:1px; background-color: silver; border:0px; margin-top:0px; margin-bottom:10px;" />
<div class="gridStyle4" ng-grid="gridOptions" />
<div class="pagination">
<ul>
<li ng-class="{disabled: currentPage == 1}">
<a ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(GridPagingOptions.totalPages)" ng-class="{active: n == currentPage-1}" ng-click="setPage()"><a ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == GridPagingOptions.totalPages}">
<a ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</div>
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
pagingOptions: $scope.GridPagingOptions,
sortInfo: {
fields: [],
columns: [],
directions: []
},
useExternalSorting: false,
showFooter: false,
columnDefs: [{
field: 'RequestNumber',
width: 90,
displayName: 'RequestID'
}, {
field: 'ActionByName',
width: 160,
displayName: 'Action }, { field: '
ActionDate ', width: 90, displayName: Action Date',
cellFitlter: "date:'yyyy-MM-dd'"
}, {
field: 'Comments',
width: 125,
displayName: 'Comments'
}, {
field: 'ApproverComments',
displayName: 'Approver Comments',
rowHeight: 25,
width: 215,
cellClass: 'wrap-text',
cellTemplate: '<label id="approverC" name="approverC" title="{{ row.getProperty(col.field)}}">{{ row.getProperty(col.field)}}</label>'
}]
};
|
|
|
|
|
I think I found an answer. I found out that someone used a textarea to do this but I still can't get it to work. Here is what I'm doing:
{ field: 'ApproverComments', enableCellEdit: false, width: 215, cellClass: 'wrap-text', cellTemplate: '' }
|
|
|
|
|
Sorry,
In my last post I miss spelled model. Here is the correct code and it still only shows an empty editable textarea and not the model text.
{ field: 'ApproverComments', enableCellEdit: false, width: 215, cellClass: 'wrap-text', cellTemplate: '<textarea ng-model="ApproverComments"></textarea>' }
|
|
|
|
|
We are using Viewer which load .jpeg file. Viewer is built by JavaScript Code. we are also using Rotation annotation but it is not working. below mention is the snippet of code.
Viewer.RotatePage = function() {
if(Viewer.CanRotate)
{
RealDocNo = Viewer.CurrentDocument - 1;
RealPageNo = Viewer.CurrentPage -1;
Viewer.Documents[RealDocNo].PageOrientation[RealPageNo] = Number(Viewer.Documents[RealDocNo].PageOrientation[RealPageNo]) +1;
if(Viewer.Documents[RealDocNo].PageOrientation[RealPageNo] == 4)
Viewer.Documents[RealDocNo].PageOrientation[RealPageNo] = 0;
document.getElementById("ThumbnailImage_"+Viewer.CurrentDocument+"_"+Viewer.CurrentPage).style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation="+Viewer.Documents[RealDocNo].PageOrientation[RealPageNo]+")";
document.getElementById("PageImage_"+Viewer.CurrentDocument+"_"+Viewer.CurrentPage).style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation="+Viewer.Documents[RealDocNo].PageOrientation[RealPageNo]+")";
if (js_HideAnnotations!="true") {
Viewer.LayoutAnnotations(Viewer.CurrentDocument);
Viewer.LayoutHilites(Viewer.CurrentDocument);
}
}
}
even we are not getting any error. please help us to resolve this issue.
|
|
|
|
|
i have one doubt
If i click on One Hyperlink(one Html page) navigate to another Page(it contain Image map---want to helight perticular location)
is it possible in java script
give suggestion or any sample file
if possible both vice versa also required
|
|
|
|
|
Yes, we can do it from JavaScript.
set unique id property of all element.
<area shape="rect" id="Shape1" coords="0,0,82,126" href="sun.htm" alt="Sun">
Access that id in Javascript code apply set src as you want. 
|
|
|
|
|
I am using canvas to draw concentric circles with clock over it, but i cant put my clock exactly over the center of circles!
|
|
|
|
|
How come?
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
