|
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.
|
|
|
|
|
So I have this row that's a cart item. And inside the row are column divs with spans for values.
I manage to isolate the div row, and I'm trying to find the the spans and change the values.
I tried each, but it seems to grab all the elements, and not step through each one.
I'm stumped on this.
So my HTML looks like this, and I want to change the value of span data-qty attr and the inner html inside the span tag.
<div class="cartRecord" onclick="service_selectItem(17);" data-serviceid="1" data-cartid="17">
<div class="cartQty">
<span data-qty="7">7</span>
</div>
<div class="cartSKU" id="1000">
<span>1000</span> </div>
<div class="cartDescription">
<span>Diagnose and repair hardware or software</span>
</div>
<div class="cartPrice">
<span>95.00</span>
</div>
<div class="cartTotal">
<span data-total="665">665.00</span>
</div>
</div>
This is what I have going, if my thoughts are way off track I'm open to suggestions.
success: function (data) {
if (data !== null) {
var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
if (dRecord !== null) {
dRecord.each(function(index, element) {
alert($(this).html());
if ($(this).is('span')) {
alert($(this).html());
if ($(this).attr('data-qty')) {
alert($(this).html());
$(this).data('data-qty', data.Qty).html(data.Qty);
}
}
if ($(this).is('span')) {
alert($(this).html());
if ($(this).attr('data-total')) {
alert($(this).html());
$(this).data('data-total', data.Total).html(data.Total);
}
}
});
}
}
|
|
|
|
|
The each function iterates through all of the elements matched by the selector - ie: the div elements with the specified data attribute. It doesn't iterate over the descendants of the matched items, which is what you're trying to do.
You don't actually need to iterate over the descendants. You can just find the relevant span elements and update them directly:
var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
dRecord.find("span[data-qty]").html(data.Qty).data("qty", data.Qty);
dRecord.find("span[data-total]").html(data.Total).data("total", data.Total);
Also worth noting that the return from the $ function will never be null. If there are no matching elements, you'll still get a jQuery object back, with a length of zero.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I feel stupid now. That's sort of how I found the the data I needed in another function.
very simple and elegant.
I didn't think of or forget about find.
I added the dRecord Check as length instead of null or undefined. Maybe I don't need it.
The data-qty and data-total didn't change, but I can figure that out.
success: function(data) {
if (data !== null) {
var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
if (dRecord.length > 0) {
dRecord.find("span[data-qty]").html(data.Qty).data("data-qty", data.Qty);
dRecord.find("span[data-total]").html(data.Total.formatMoney(2, '.', ',')).data("data-total", data.Total);
}
} else {
$("#serviceUpdate").removeClass('btn btn-default').addClass('btn btn-danger');
}
}
Oh this MVC and the Twitter Bootstrap CSS is hard to implement, but getting better at it. And faster.
Thanks Richard, I was completely off the rails on this. 
|
|
|
|
|
Just to throw on the pile a little more, have you considered using a data-binding framework like Knockout, Backbone, or Angular? They do have the benefit of working on data as if it's at the base data level, rather than having to reverse-engineer the data from a rendered view.
|
|
|
|
|
No I haven't considered it. I heard of Angular but have no clue what it is.
Nathan Minier wrote: rather than having to reverse-engineer the data from a rendered view.
But I rendered the content in the view with JQuery after the GET call.
I mean I used jQuery to download the cart items and construct the HTML for it.
Then wrote this post to update the item qty and total price.
Feel free to elaborate ...
|
|
|
|
|
Well, general JavaScript and jQuery do not support any sort of data binding, so when data is modified for any reason you may miss it, or use JavaScript to walk the DOM until you locate the appropriate element.
Data binding frameworks eliminate this necessity. You can use them to bind a JavaScript variable to an element on the DOM. This means that when a value is updated either from an AJAX call or from user interaction, the change reflects in both the script and on the DOM.
For instance, I could rewrite your sample as:
<html ng-app="myApp">
...
<div ng-controller="myCartController">
<div class="cartRecord" ng-click="doSomething()">
<div class="cartQty">
<input type="text" ng-model="model.quantity" />
</div>
<div class="cartSKU">
<span>{{model.SKU}}</span> </div>
<div class="cartDescription">
<span>{{model.Description}}</span>
</div>
<div class="cartPrice">
<span>{{model.price | currency : '$' : 2}}</span>
</div>
<div class="cartTotal">
<span>{{model.total}}</span>
</div>
</div>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myCartController',['$scope',function($scope){
$scope.model = MethodToGetModelFromAJAX();
$scope.model.total = $scope.model.price * $scope.model.quantity;
$scope.doSomething = function(){
}
}
</script>
</html>
Never mind the Angular-specific syntax, that code will allow you to populate the HTML via AJAX, update the quantity and recalculate the total, format the currency, and will even "do something!" on click.
|
|
|
|
|
That sounds and looks cool!
That may reduce my development time, after the learning curve.
So this is what most folks are using today? and is well accepted?
I'm pretty far behind on MVC, and need to catch up.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
