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
Related
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
I have a custom JavaScript file with some function in it. All the functions work perfectly fine.
One of the functions returns a list modules. I would like to repeat in my template the div section as many times is the length of my list.
This is my ionic template file:
<ion-view title="My Marks" id="page7">
<ion-content ng-controller="MyMarks" padding="true" class="has-header">
<div ng-repeat="module in getCourseModules">
<div class="row">
<div class="col">{{module}}</div>
</div>
<div class="row">
<div class="col col-50">Module Mark</div>
<div class="col col-50">{{GenerateRandomMarks[i]}}</div>
</div>
<br>
<br>
</div>
</ion-content>
And this is my controller inside my app.js:
app.controller('MyMarks', function ($scope){
$scope.courseNum = GenerateRandomNumber(0, 9);
$scope.getCourseName = getCourseName(courseNum);//Returns just Text
$scope.getCourseModules = getCourseModules(courseNum); //Returns the list
$scope.GenerateRandomMarks = GenerateRandomMarks(); //Returns a list of numbers
});
How can I repeat the segment of code I need? and in that segment of code, each time is repeated it should display different element of the list {{getCourseModules[i]}}.
I solved the most of it. But I cant figure out the repeat part. If I manually copy/and paste the code it works fine.
You need to use ngRepeat directive.
<div ng-repeat="model in getCourseModules">{{model}}</div>
<div ng-repeat="model in getCourseModules">{{someAnotherArray[$index]}}</div>
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.
On my index page, when I add a Hangouts button like below it is drawn & works as expected.
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<g:hangout render="createhangout"></g:hangout>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
</body>
But when I place it inside a template, which is displayed based on url route, then only the Hangouts button is not drawn & cannot be seen in UI.
<script type="text/ng-template" id="/home.html">
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <g:hangout render="createhangout"></g:hangout>
</div>
</div>
</script>
Could you please tell me why is it not being drawn
&
what should I do to get the button displayed? It would be of great help !
Using AngularJS.
I had the same issue, and found a solution using Angular directives.
The problem rendering button with Google tag markup is that the rendering executes when the platform.js script loads, which is before Angular loads the template.
So a solution is to call Google API render function after Angular loaded the template. I did it creating an Angular custom directive with a link function :
hangoutButton.directive('hangoutButton', function() {
return {
restrict: 'E',
template: '<div id="hangout-button"></div>',
link: function (scope, element, attrs) {
gapi.hangout.render('hangout-button', {'render': 'createhangout'});
}
};
});
Then you can display it in a template with the custom element :
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <hangout-button></hangout-button>
</div>
</div>
I solved this by using the angular controller to render with javascript instead of in html markup. Try something like this:
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<div id="placeholder-div"></div>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
In your controller:
myApp.controller('MainCtrl', ['$scope', function($scope) {
gapi.hangout.render('placeholder-div', { 'render': 'createhangout' });
}]);
Try removing the / from id="/home.html"
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>