I'm very new to angularjs and i'm trying to find a way how i can translate the following jquery into angularjs
jquery
$("element").html("some text here");
I found something like this but it wont apply
<div ng-init="obj = {greet: false}">
<ng-messages for="obj">
<ng-message when="greet">Show me</ng-message>
</ng-messages>
</div>
If i omit the description of the modules and controllers, you'll have something like that :
in the js : $scope.myValue = "a value";
in the html : <div>{{myValue}}</div>
ng-messages test if the expression is true, and show ng-message if it is.
I'm not sure, that it does what you're searching for.
Related
is it possible to do a replacement inside a HTML tag?
Template:
<input type="checkbox" disabled {{#if CompleteAndTrueConfirmation}}checked{{/if}} >
Test Data:
{
"CompleteAndTrueConfirmation": true
}
I get the error:
Unexpected character after / in tag. Expected >.
This template works but looks cumbersome:
{{#if CompleteAndTrueConfirmation}}
<input type="checkbox" disabled checked />
{{else}}
<input type="checkbox" disabled />
{{/if}}
No, it's not possible to use a Handlebars block like {{#if ... within an HTML start or end tag because it interferes with the HTML parsing in the SendGrid template editor. ☹
More info:
When I edit module HTML, paste your template, and save, I get an error:
When I edit the code again, I see the code has been modified because the editor tries to fix the HTML by making attributes out of the bits of Handlebars code:
It is possible to do substitution where the test data contains HTML (example), but that kind of defeats the purpose of using a template.
I read about ngClass in angularjs docs looked at different issues, but i still dont understand how to solve my simple problem with angular...
I have a simple button in html
<div class="form-group">
<button ng-click="displayMessage();">Change color</button>
</div>
By click on this button, function displayMessage analyze input-field (i didnt show it here) and returns one message from three, it depends from condition.
$scope.message = firstMessage;
$scope.message = secondMessage;
$scope.message = thirdMessage;
This message is expression. And validates with "if" in my app.js
<div class="form-group message">
{{message}}
</div>
And my problem is to change style of my message depending what message now is showing.
For example if it validates with firstMessage - this message should be green.
If it secondMessage - yellow...
And so on.
As i understand i need to manipulate with ng-class, but i could imagine how it works without good example
Store message and class associated with it in an object and use it in your html
$scope.message = {
"message" : "firstMessage",
"class" : "red"
}
in HTML
<div ng-class="message.class" class="form-group message">
{{message.message}}
</div>
in CSS
.red {
//whatever styling you want
}
Please have a look at plunker
I use the verions 0.14.2 of angular-ui-bootstrap. I was unable to display line returns in the popover.
I use the popover-html directive, and a string such as
Limite inférieure<br>Limite supérieure
It gives the following error :
Lexer Error: Unexpected next character at columns 41-41 [é] in expression [<div>Approchant des limites<br>Limite supérieure: 34:12<br>Limite inférieure: -34:12</div>].
I tried wrapping my string in a $sce.trustAsHtml call, but it didn't change a thing.
Here is a plunker
http://plnkr.co/edit/3JSly1anPBUiGyqBcsD1
Works for me using $sce.trustAsHtml as below.
Note: trustAsHtml tells Angular to trust that the HTML is safe, so should only be used if you do trust the HTML, i.e. its not user-supplied.
JS:
$scope.popoverContent = $sce.trustAsHtml('Line 1<br>Line2');
HTML:
<button popover-placement="right" uib-popover-html="popoverContent" type="button" class="btn btn-default">Popover</button>
Updated Plunker
Or if your content is dynamic and you need a function:
JS:
$scope.input = 'Line 1<br/>Line 2';
var trusted = {};
$scope.getPopoverContent = function(content) {
return trusted[content] || (trusted[content] = $sce.trustAsHtml(content));
}
HTML:
<button popover-placement="right" uib-popover-html="getPopoverContent(input)" type="button" class="btn btn-default">Popover</button>
Plunker
(The reason for caching the value returned by trustAsHtml is that trustAsHtml always returns a new object so can cause an infinite $digest loop)
The accepted approach can easily lead to a cross-site scripting vulnerability in you application. You should really only use $sce.trustAsHtml if you explicitly trust the content that you want to display. The angular-bootstrap documentation also hints at that:
The user is responsible for ensuring the content is safe to put into the DOM!
An alternative and safer approach is to use uib-popover-template with a simple template in combination with ng-bind-html that automatically uses $sanitize to sanitize the HTML.
HTML
<p uib-popover-template="myPopoverTemplateUrl"
popover-trigger="mouseenter"
popover-placement="top"
popover-append-to-body="true">
Show a Popover on Hover
</p>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<p ng-bind-html="popoverContent"></p>
</div>
</script>
JS
$scope.myPopoverTemplateUrl = "myPopoverTemplate.html";
$scope.popoverContent = "This is HTML <b> And will be sanitized."
You also need to make sure to declare ngSanitize in your app and to include the angular-sanitize.js script. Please take a look at the updated plunker for reference.
Updated Plunker
I have searched the question/answers and it seems as if I should use a directive. I would however prefer to use the well tested ngInclude. The scenario is:
I am using ngInclude to fetch an external navigation bar(from a different site) and the returned html contains a login form, that points to a wrong url.
My ngInclude looks like this: <div ng-include = "''+API_HOST+'api/cms/navbar'">
The login form part of the navbar looks something like this
<form id="loginForm" class="form-inline ng-pristine ng-valid"
method="post"
action="/somewebapp/j_spring_security_check"
name="loginForm" target="_top"
I would like to modify the action attribute, to point to a different url.
Is there no other way than creating a directive to do that ?
Thanks
why you not use :
$scope.loaded = function(this_)
{
angular.element(document.getElementById("loginform")).children().attr("action", "yahoo.com");
}
see this plunker http://plnkr.co/edit/O4NyTULkBB6BpN4T9MNS?p=catalogue
In Angularjs template is it possible to use ViewBag.Property in ng-show?
I set some viewbag in my controller/action like this
ViewBag.AllowExport = false;
when i tried following nothing happen
<div ng-show="#ViewBag.AllowExport">
Export
</div>
Above Div is still showing even if AllowExport = false;
Is my syntax is wrong here or we can not use Viewbag in ng-show?
Any advice
Try this:
<div ng-show="'#(ViewBag.AllowExport)'">
Export
</div>
You're mixing fron-tend (Angular/JavaScript) and back-end (Razor) code here. I would strongly advice against that. However if you really want to do that: the result in HTML will be which will just be a string to Angular.
This should work instead since Angular will validate the expression in {{}}:
<div ng-show="{{#ViewBag.AllowExport}}">
Export
</div>
Instead of mixing in Razor syntax in your Angular HTML code I would recommend using a scope variable being set from either some JSON source, or if you really want to mix in MVC data, setting the value in some Javascript configuration:
<script>
window.ClientConfig = {
allowExport: #ViewBag.AllowExport,
};
</script>
Then in your Angular controller simply use $scope.allowExport = window.ClientConfig.allowExport;
And in HTML:
<div ng-show="allowExport">
Export
</div>