I'm trying to use angular to reload (or 'livechange') content - the content default structure isn't created by angular.
so i have the following
<div>Default Value</div>
and i want to be able to rebuild the content with angular (ng-bind-html is a great solution, but it cant use 'default' value).
Any help would be appreciated. thanks!
You can do that using ng-hide/ng-show directive please see here http://plnkr.co/edit/oHJMD6UU3xOOg5HZo3IC?p=preview
<body ng-controller="MainCtrl">
<textarea name="comment" ng-model="myHTML"></textarea>
<div ng-bind-html="myHTML" ng-show="myHTML"></div>
<div ng-hide="myHTML">Default Value</div>
</body>
Related
So im using data-ng-include to display a html template in a div. The problem that i am running into is that in my local... the path to the html works and everything works fine. However once i run gulp build and run the app in production, i think the path is incorrect and the UI cant find the correct template to display.
for example..
HTML:
<div id="abc" ng-init="init()">
<div ng-controller="splitController" data-ng-include="templateURL"></div>
</div>
TemplateUrl:
$scope.templateURL = '/app/components/preview/split/split.html';
Anyone know how to locate the html path for when the app gets built into prod?
Thanks
first, separate your controller and ng-include. create separate elements for each
<div id="abc" >
<div ng-controller="splitController" ng-init="init()">
<div ng-include="templateURL"></div>
</div>
</div>
Then in the url, make sure to add single quotes inside the double quotes.
$scope.templateURL = "'/app/components/preview/split/split.html'";
If I detail the problem I'm trying to solve, it will help with my question.
I want to use HTML in the Angular Material tooltip, the current template doesn't enable this functionality:
<div class="mat-tooltip"
[ngClass]="tooltipClass"
[style.transform-origin]="_transformOrigin"
[#state]="_visibility"
(#state.done)="_afterVisibilityAnimation($event)">
{{message}}
</div>
In order to use HTML in the tooltip I'd like to override the template to the following:
<div class="mat-tooltip"
[ngClass]="tooltipClass"
[innerHTML]="message"
[style.transform-origin]="_transformOrigin"
[#state]="_visibility"
(#state.done)="_afterVisibilityAnimation($event)">
</div>
Is this possible? Is there another method I'm overlooking to achieve what I'm looking for?
The html file cannot be changed, however you can access the element from the component.ts file
#ViewChild('dataContainer') dataContainer: ElementRef;
loadData(data) {
this.dataContainer.nativeElement.innerHTML = data;
}
as found in thie SO-answer.
I have the following HTML on my web page.
Is it possible to use PHP (or jQuery) to grab the content within the divs? I'd ultimately like to use it within a PHP script.
<div id="selectedaddress">
<div>James</div>
<div>Thomson</div>
<div>London</div>
<div>England</div>
</div>
Thank you.
use like this
$('#selectedaddress').children().each(function(){
console.log($(this).text());
});
see console on jsfiddle - working example
Possible another easy way using map()
$("#selectedaddress div").map(function(x,e){
alert($(e).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectedaddress">
<div>
James
</div>
<div>
Thomson
</div>
<div>
London
</div>
<div>
England
</div>
</div>
Depends on what functionality you are looking for. Judging by the code you have, most likely you want a <form> with <input> tags and a submit button.
For a form functionality, check out PHP 5 Form Handling and The <select> element. You would like to grab a value from a selected list.
In my application one block is loaded with the controls dynamically. After loading the dynamic controls the data is update by using the angular js. But the angular js is working with static placed controls. But not with dynamic controls.
Here I placing the dynamic code What I tried to get.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ren").html('<p>Name: <input type="text" ng-model="name"></p>');
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<div id="ren"></div>
<p ng-bind="name"></p>
</div>
<button>click</button>
</body>
</html>
Here the input control dynamically added to the div. The text I enter in control does not appering on paragraph. But this work fine if the input control place in div static.
Am I doing any wrongly. please solve my problem.
Probably your html attached via jquery function, is not registered to angular's watch tree. as a result, it doesn't trigger a digest cycle when you type to input with ng-model. Also this kind of usages angular with jquery in the dom edition level is not recommended. In my opinion, you should use directive instead of that jquery-dom operation
I'd prefer to do it in angular way, rather than mixing jQuery with angular. Because directly adding DOM to angular context will not worked as angular compiled DOM(means angular binding will not work on newly injected DOM). You need to compile that DOM with $compile service with specific scope before injecting it into DOM to enable binding on it.
Lets follow this way, which is fully angular way of doing it. There would be ng-click directive on the button, and will toggle a flag to show and hide element & we will render that array using ng-if
HTML
<p>Input something in the input box:</p>
<div id="ren">
<p ng-if="showName">Name: <input type="text" ng-model="name"></p>
</div>
<p ng-bind="name"></p>
</div>
<button type="button" ng-click="showName!=showName">click</button>
My code returns HTML data from ASP.NET as a response from an action method.
I am displaying this in a <textarea> element.
<textarea style="width: 85rem; height: 15rem;"
ng-disabled=true
ng-model="access.response"></textarea>
However when it displays I see the actual HTML.
How can I make it so the information displayed in the textbox or some other way is the same as in my browser window? Note that I do not want to edit the data but I would like the scrollbar type feature.
Is correct to say that you cannot display it in a textarea, but you can't use a simple div neither to display the parsed HTML.
Take a look at this Plunkr --> http://plnkr.co/edit/ld4Nte2KKIbgMkIWnRcP
You have to make use of the $sce service and the ng-bind-html directive, like this:
<div ng-controller="SimpleCtrl">
<!-- This will be parsed as HTML-->
<div ng-bind-html="to_trusted(someCode)"></div>
<!-- This will not -->
<div>{{someCode}}</div>
</div>
No way to do it with textarea.
If you want editable HTML content, consider this:
<div contenteditable="true"></div>