How to replace ionic footer elements' text contents? - javascript

I'd want to replace the text Check{{product.name}} to Check{{user}} if a condition is true.
I spent hours, tried hidden, display:none, .hide() etc. but none of them worked..
I also tried to create another <a> block for check{{user}} and hide the block if the condition is not true, but it does not work as well....
Wondering if someone could please help! Thanks.
There is my code:
html:
<ion-footer-bar class="bar-positive" ng-if="loggedUser!=user.id" >
check {{product.name}}
</ion-footer-bar>
js:
if (user_name !=''){
//change Check{{product.name}}" to "Check{{uesr}}"
};

Try this
<ion-footer-bar class="bar-positive" ng-if="loggedUser!=user.id" >
<a href="link" id="newtest">
<span ng-show="your_condition"> check {{product.name}} </span>
<span ng-show="!your_condition">Check{{uesr}}</span>
</a>
</ion-footer-bar>

If it is just text your replacing, then it is pretty easy.
$('ion-footer-bar > a').html('Check{{user}}');

It sounds like your problem is within your controller. When ion-footer-bar is outside the content, the scope is not shared with the footer. Make sure you wrap your html with a <div> and define a controller there before do a conditioning logic in your view.
<div ng-controller="mainCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Header</h1>
</ion-header-bar>
<ion-nav-view>
<ion-content>
Your content here
</ion-content>
</ion-nav-view>
<ion-footer-bar class="bar-positive">
<span ng-if="loggedUser!=user.id">
check {{product.name}}
</span>
<span ng-if="loggedUser==user.id">
Check{{user}}
</span>
</ion-footer-bar>
</div>

Adding to the first answer, you can also use
angular2 with *ngIf = (condition) inside of or to achieve the same results

Related

How to add Html code dynamically to ion-content?

I'm working with ionic cross platform and I want to add dynamically a html code inside ion-content and thank you.
<ion-view view-title="Admin-DashBoard">
<ion-nav-bar class="bar bar-header header-all">
<ion-nav-buttons side="left">
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<div class="some css">
<div class="some css" ng-include="newPage.url"> </div>
</div>
</div>
</ion-content>
$scope.ratingView = [{
name: 'templates/zzz/zzzz-ratings.html',
url: 'templates/zzz/zzzz-ratings.html'
}];
$scope.newPage = $scope.ratingView[0];
Above code that show , you create add dynamically html page , if you want add html from controller side simply create controller side template with javaScript.
Take a look to ng-bind-html, you must include safe html

Icon in ionic list is not clickable

I have a list in my ionic project with some icons that I want to click. But I cannot get the click to be picked up either by the htmll onclick() or by the AngularJS ng-click. My html looks like this:
<ion-view view-title="CUES - WATCH LIST">
<ion-content>
<div class="notification-message col-80" ng-hide="hideNotificationMessage" ng-click="hideNotificationMessage=true" ng-bind-html="messageContents"></div>
<ion-list>
<ion-item ng-repeat="watchlistitem in watchlist" href="#/app/trailer/{{watchlistitem.id}}">
<div class="watchlist-movie-thumb">
<img class="movie-thumb-image" src="{{watchlistitem.picture}}">
</div>
<div class="col-75 watchlist-title-genre-container">
<div class="watchlist-movie-title">
{{watchlistitem.title}}
</div>
<div class="watchlist-movie-genres">
{{watchlistitem.genres}}
</div>
</div>
<a class="item-icon-right" onclick="alert('you clicked me');" ng-click='remove_movie()'>
<i class="icon ion-trash-a" style="color:black;padding-top:40px"></i>
</a>
<a class="item-icon-right">
<i class="icon ion-ios-upload-outline" style="color:black;padding-bottom:40px;"></i>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
The fact that even the onclick() doesn't pick up the click is very odd. I have tried changing the z index to 9999 but that has made no difference.
I stumbled across an answer by trying every html mod I could think of.
This is a bit of a bodge but works without compromising the layout.
I simply added a margin-right style to the tag as follows:
<a class="item-icon-right">
<i class="icon ion-ios-upload-outline" style="margin-right:-2px;color:black;padding-bottom:40px;" ng-click='remove_movie()'></i>
</a>
It doesn't seem to matter with respect to fixing the click problem what value I give the margin-right as long as it is there. It does though alter the layout as you would expect.

Angular Js Tool Bar issue

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.

just one of the ng-bind-html in page 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>

Angularjs:-Remove double curly brace notation from displaying momentarily before loading

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

Categories