Hi I am a newbie to angularjs.There was a problem I am getting I am getting while trying to implement angularjs in my code.
The below is my code:-
<div class = 'search-icon'>
<div class = 'iconoverlay hidden-phone' ng-click="clickSearch()"></div>
<input type='search' id="mainSearch" placeholder='Search TV' ng-model="searchQuery.text" search-auto-complete>
<div ng-show="showInvalid == true" style="display: block ; margin-top: -8px;color: red;" ng-cloak>Invalid search text</div>
</div>
<div class="icon"></div>
</div>
<div class='select-language' ng-controller="AppController">
<a class='btn' style="width: 170px;" id='selectLanguage' ng-controller="AppController" timezone ng-cloak>{{city['city']}}<span class='arrow'></span></a>
</div>
<div ng-switch-when="on" class='username'>
<span width:100px ng-cloak>{{userInfo.name | filterUserName}}</span>
<div class="btn-group">
<div class="btn dropdown-toggle moreDropdownTrigger" id="usernameDropdown"></div>
</div>
</div>
</div>
As from the above code I have implemented ng-cloak to to prevent the Angular html template from being briefly displayed by the browser in its raw form while the application is loading.
The below is the image:-
Please help me with it.Thanks
Include ng-cloak directive in your wrapper HTML element
<div ng-cloak>{{ myObject.item }}</div>
and include the following CSS rule in your css file:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Seems you are missing style="" in <span width:100px ng-cloak>. Maybe it brokes ng-cloack directive.
Do it like this:
<span ng-cloak> ... </span>
Or:
<span ng-bind="userInfo.name | filterUserName"></span>
Note! put "width: 100%" in "style" attribute
or you can do:
<span ng-bind-template="{{ userInfo.name }}">Your Default value</span>
I uses this and always work, the point is sometimes you can have some default value to just fill the text content before anything shows up, or you can leave it blank.
Instead of using ng-cloak and having to write a css class for ng-cloak, using just ng-bind is more powerful.
<div class='select-language' ng-controller="AppController">
<a class='btn' style="width: 170px;" id='selectLanguage' ng-controller="AppController" timezone ng-bind="city['city']">loading...<span class='arrow'></span></a>
</div>
One more interesting feature of ng-bind is the ability to set default value before data is loaded in the code above, i used "Loading..." you can also leave it blank if you wish.
also, you can check the angular API doc https://docs.angularjs.org/api/ng/directive/ngBind
Related
First my code used simply String to define email but there were requirement to use multiple values instead of one String[]. I'm using PrimeNG 14.2.x combined with Angular 14 as frontend. Always with inputgroup using text have no problem but somehow it doesn't work well with p-chips component.
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
<input type="text" pInputText placeholder="Email" name="recipientEmails">
</div>
</div>
result:
browser view - ok
after modification I've got
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
<p-chips allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
</div>
</div>
result:
browser view - failed
and from this point p-chips isn't useful anymore. User cannot see what is added.
I've stucked, Any ideas ?
I tried modify css directly to
.p-chips {
width: 100%;
}
but it didn't help
Ok, I've resolved this by using bootstrap right now
<div class="p-col-12 p-md-4">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><em class="pi pi-envelope"></em></div>
</div>
<p-chips placeholder="Emails" allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
</div>
</div>
result
I hope it helps someone
I am using bootstrap for the following mark-up and adding in my own classes of css where needed to style the pages how they are required
.sm-margin {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<div class="thumbnail">
<a href="menu.php">
<img src="img/turkey.jpg" alt="Turkey dinners" style="width:100%">
<div class="caption text-center sm-margin">
<p><button type="button" class="btn btn-success">Check out our menu</button></p>
</div>
</a>
</div>
</div>
I am unclear to why the .sm-margin doesn't add the small margin at the top - see it in effect on my website here
The margin is added to the top of your button in the website
U can inspect and un check the checkbox of your class to see the difference if u use that css class or not...
My code was correct, it was a browser error. I cleared my cache on the Chrome browser and it corrected it.
Thanks all for input.
I am having a toolbar directive using angular material, I am using a transclude at the end of the directive and I want the transcluded element to come at the right end of the banner. But what ever I do, it wont work, its coming after the elements of the directive?
The code for template is like below.
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<a ui-sref="#">Test - <span ng-bind="header.title"></span></a>
</h2>
<span flex="5"></span>
<div ng-transclude></div>
</div>
</md-toolbar>
Please find the example here. I wan to move Test123 to the right most end of the toolbar. Please help me
Try this as your banner.html:
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<a ui-sref="#">Test - <span ng-bind="header.title"></span></a>
</h2>
<span flex="5"></span>
<div ng-transclude style="position:absolute;right:0;top:16"></div>
</div>
</md-toolbar>
Not sure if this was what you were looking for but it does do what you asked.
You are in the right track.
In your banner.html you need to modify the <span flex="5"> to <span flex> this will make it expand all the way to the right instead of just 5 units and push everything inside the ng-transclude with it.
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<a ui-sref="#">Test - <span ng-bind="header.title"></span></a>
</h2>
<span flex></span>
<div ng-transclude></div>
</div>
</md-toolbar>
Also notice I cleaned up the index.html file so you can easily add content in between the banner tags.
<banner header-title="Title 1 Test">
<span>Test 123</span>
</banner>
You can see the full solution here
If you are interested, you can find more information about the md-toolbar directive in the official documentation.
As it stands, dropzonejs is generating markup for every file uploaded. I do not want this nor do I want to define a custom template. As it stands, I just listen for various events and perform actions like updating HTML.
When I don't define a template, the typical default markup is generated.
<div class="dz-preview dz-file-preview dz-processing dz-success">
<div class="dz-details">
<div class="dz-filename">
<span data-dz-name>thumbnail2.png</span>
</div>
<div class="dz-size" data-dz-size>
<strong>0.1</strong> MiB
</div>
<img data-dz-thumbnail>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress style=
"width: 100%;"></span>
</div>
<div class="dz-success-mark">
<span>✔</span>
</div>
<div class="dz-error-mark">
<span>✘</span>
</div>
<div class="dz-error-message">
<span data-dz-errormessage></span>
</div>
</div>
I don't want any markup to be generated. I've looked at the addedfile event and that's where it determines if a custom template is defined or generate the default markup. I don't need this.
I could easily just target .dz-preview and display none however I just would prefer if the HTML was never generated.
I've tried setting previewsTemplate: "" and that didn't work.
I write angularjs application and have this block of code but just first html-bind-html works for me
<div ng-bind-html='newsTitle'>
<div ng-bind-html='newsDetail'></div>
</div>
When i change the priority like this :
<div ng-bind-html='newsDetail'>
<div ng-bind-html='newsTitle'></div>
</div>
It shows newsDetail value.
How many ng-bind-html per page can i declare? why second value doesn't show?
I guess I understand your problem.
<div ng-bind-html='newsTitle'> <!-- This will replace the content of the div with $scope.newsTitle -->
<div ng-bind-html='newsDetail'> <!-- So this won't appear, because it has been removed by ng-bind-html='newsTitle' -->
</div>
</div>
Look my comments in the code. So if you put newsDetails in the first place, the binded HTML ($scope.newsDetail) will replace the current content aswell.
In a word, ng-bind-html replace the current content of your element with the binded HTML you provide. So you shouldn't put HTML in those elements.
You just have to do something like this :
<div class="news">
<div ng-bind-html='newsTitle'></div>
<div ng-bind-html='newsDetail'></div>
</div>
Some docs about ngBindHtml directive : https://docs.angularjs.org/api/ng/directive/ngBindHtml
If it's real copy of your html. Then I suppose that it's problem with structure. Please close your block:
<div> </div>
You can try and write it like this
<div><span ng-bind-html='newsTitle'></span></div>
<div><span ng-bind-html='newsDetail'></span></div>