How use it?
I use
[div class='content']
[a href="test.html"]SecondPage[/a]
[/div]
But when i click, loads a empty page
Can you give me some example? please
Test.html must contain just div.
<div id="jqt">
<div id="home" class="edgetoedge">
<div class="toolbar">
<h1>Books</h1>
</div>
<ul class="edgetoedge">
<li>Book Add
</li>
</ul>
</div>
</div>
bookedit.jsp below
<div id="forms">
<div class="toolbar">
<h1>Forms</h1>
Back
</div>
<form class="scroll">
<ul class="edit rounded">
<li>Author : <input type="text" name="author" value="">
</li>
<li>Title :<input type="text" name="title" value="">
</li>
<li>Available :<input type="checkbox" name="available" value="true">
</li>
</ul>
</form>
</div>
Related
I am listing div using ng-repeat to in following manner and include form-template which is assigned. I have several form-template and want to include in following manner. They can have nested ng-repeat to include same template. So i am using "trackerWidgetData" variable in my template. its working fine but inner ng-repeat have different variable(dependWidgetData).
How to use common model value for form-template. If we are including it in nested ng-repeat.
<div class="listview-trckr-new clearfix" ng-repeat="trackerWidgetData in optionsList.inlineTemplates | filter:options.trackerSearchClient track by $index">
<div class="listview-trckr-new-top">
<div class="listview-trckr-new-left clearfix">
<h3>{{trackerWidgetData.trackerName}}</h3>
</div>
<div class="listview-trckr-new-right">
<div ng-if="trackerWidgetData.template" ng-include src="'/public/views/tracker-templates/'+trackerWidgetData.template"></div>
</div>
</div>
<div class="listview-trckr-new-btm" ng-if="trackerWidgetData.dependendTrackers && trackerWidgetData.dependendTrackers.length">
<div class="listview-trckr-new-top" ng-repeat="dependWidgetData in trackerWidgetData.dependendTrackers">
<div class="listview-trckr-new-left clearfix">
<h3>{{dependWidgetData.trackerName}}</h3>
</div>
<div class="listview-trckr-new-right">
<div ng-if="dependWidgetData.template" ng-include src="'/public/views/tracker-templates/'+dependWidgetData.template"></div>
</div>
</div>
</div>
</div>
I have many different type template like this.
<script type="text/ng-template" id="addManualContent.tpl">
<ng-form name="stepAddForm" novalidate >
<div class="new-weight-tracker">
<div class="weight-auto-fil-input">
<input type="text" name="value" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.values[0].value" />
<div class="new-trkr-select">
<select class="weight-selectbox" name="foodUnit" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.values[0].unitId" ng-options="opt.id as opt.unitName for opt in trackerWidgetData.unitType.units">
</select>
</div>
</div>
<div class="new-tracker-cale">
<adm-dtp ng-model='form[trackerWidgetData.uniqueFormId].trackerValue.dateTime' maxdate="{{optionsList.maxTimeStamp}}" options='{format: toUpperString(dateFormat) + "hh:mm", default: todayTimestamp, freezeInput:false}'>
<input name="date" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.dateTime" ng-click="initDTP(form[trackerWidgetData.uniqueFormId].trackerValue.dateTime)" type="text" ng-required="true" dtp-input>
<i aria-hidden="true" class="fa fa-calendar" ng-click="initDTP(form[trackerWidgetData.uniqueFormId].trackerValue.dateTime)" dtp-toggle></i>
</adm-dtp>
</div>
<div class="new-logit-btn">
<a ng-href="" ng-class="{'disable-anchor-btn': optionsList.inAddProcess}" ng-click="optionsList.inAddProcess ? null : addTrackerValue(stepAddForm, trackerWidgetData)" class="fill_button">Log It</a>
</div>
</div>
</ng-form>
</script>
The Question is How to pass model value to ng-template when including it?
here is my .html :
<ul class="messages list-unstyled" ng-repeat="newMessage in messages">
<li>
<p>
<span class="username">{{newMessage.username}}</span><br />
</p>
<p>
<span> {{newMessage.message}}</span>
</p>
<p class="no-pad-bottom date-posted">Send {{ newMessage.date }} <span /></p>
<div class="comments">
<ul class="list-unstyled" ng-repeat="newComment in comments">
<li>
<p>
<span class="commentor"> {{newComment.username}}</span>
<span> {{newComment.message}}</span>
</p>
<p class="no-pad-bottom date-posted">Send {{ newComment.date }} <span /></p>
</li>
</ul>
<form class="add-comment">
<div class="row">
<div class="col-md-10">
<input type="text" class="form-control" ng-model="myComment" placeholder="Add a comment" />
</div>
<div class="col-md-2">
<button class="btn btn-default btn-sm" type="submit" ng-click="addComment(newMessage.id)">Comment</button>
</div>
</div>
</form>
</div>
</li>
</ul>
everything is working. i can send my messages, and i can even send posts, but i get null from ng-model="myComment"
here is the method in js controller
$scope.addComment = function (messageId) {
myChatHub.server.addComment(messageId, userName, $scope.myComment);
};
can you please tell me what's wrong?
You are breaking the golden rule of always having a dot in ng-model .. or in other words using an object
ng-repeat creates a child scope and your primitive assigned to ng-model therefore only exists in the child scope since primitives have no inheritance.
Create model object in controller
$scope.model={}
And then use that ng-model="model.myComment" and change your post to:
$scope.addComment = function (messageId) {
myChatHub.server.addComment(messageId, userName, $scope.model.myComment);
};
This 3 minute video will be very enlightening
I am following the following link to get angular animations working in the app:
http://angularanimation.ya.com.tr/start.html
I have animate.css in my css folder and link to it in index.html.
Also, I have ngAnimate as a dependent module in app.js
I tried to use an animation in my html:
<ion-view class="slide-from-top">
<ion-content>
<div class="contentArea">
<form action="#">
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<hr>
<div class="row text">
<div class="col-33">Subtotal</div>
<div class="col-75">Rs. 210.00</div>
</div>
<div class="row text">
<div class="col-33 blueText">Discount</div>
<div class="col-75 blueText">Rs. 42.00</div>
</div>
<div class="row text">
<div class="col-33">Delivery Fee</div>
<div class="col-75">Rs. 10.00</div>
</div>
<hr>
<div class="row text">Total will refund off</div></br>
<div class="row text">
<div class="col-33 totalBig">Total</div>
<div class="col-75 totalBig">Rs. 178.00</div>
</div>
<hr>
<form action="#">
<div class="customRow">
<div class="row coupon">
<label>Coupon</label>
<input class="couponField" type="text">
<button class="applyBtn">Apply</button>
</div>
</div>
</form>
<p class="row redText">Minimum Order : Rs. 500/-</p>
</div>
<button class="button-checkout">Proceed to Checkout <i class="fa fa-shopping-cart"></i> >></button>
</ion-content>
</ion-view>
Infact, when I go to console,
I see this:
How do I get it working?
Pleas check https://daneden.github.io/animate.css/
Dynamic Animation
You have to call animation function like
<ion-view class="myAnimation">
<ion-content>
....
</ion-content>
</ion-view>
and add class when page is loaded
$('#myAnimation').addClass('animated shake');
and after animation finish you have to remove class which is added to div so again animation works without refresh page. for that you have to do that
$('#myAnimation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', removeClass);
function removeClass()
{
$('#myAnimation').removeClass('animated shake');
}
This way is dynamic but you can also set as static in html like
Static
<ion-view class="animated shake">
<ion-content>
....
</ion-content>
</ion-view>
When i using textarea below the ng-repeat in angular js - ionic . The text area is not working properly and some time lost it focus also. Please provide me solution for that this is my code :
<div class="title">Comments</div>
<ul class="comment_list">
<li ng-repeat="x in comments ">
<a><img no-image ng-src="{{profile_img_path.image_url_tiny+x.User.image}}" alt="" class="pro_img"></a>
<div class="pro_deatil" >
<h2> {{x.User.name}} </h2>
<p>{{x.CommentDish.comment}}</p>
</div>
<div class="pro_like" >
</div>
<div class="clearfix"></div>
</li>
</ul>
<div class="comment">
<textarea name="comment" rows="5" cols="10" ng-model="comment_data.comment" placeholder="Enter Comment" class="post_txt_area" overflow-scroll="true"></textarea>
<div> <a ng-click="postComment()" class="event_btn">Comment</a> </div>
</div>
Please help me if anyone has solution for this issue....
I am really new in AngularJS but I have to make a web app using it, I have some input that control the style of an element (width, height, name, description and color) on the left side of my HTML. I used to had all elements hidden, when the user clicked it appeared and everything worked good, now I started using ui-router, if you click the 'Fullscreen' it will call thet html file. Some inputs work except the one I defined an initial scope value.
I leave a plunker so you can have an idea of what's going on.
http://plnkr.co/edit/jJTcZQb4lzZeAtNl7YZ1?p=preview
The main HTML:
<!doctype html>
<html lang="en" ng-app="bmiChatbuilder">
<head>
<meta charset="UTF-8">
<title>ChatBuilder</title>
<!-- Adding Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/colpick.css">
</head>
<body ng-controller="myCtrl">
<div >
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div>
<h3>Select your chat</h3>
<a ui-sref="fullscreen">Fullscreen</a>
<a ui-sref="chatbanner">ChatBanner</a>
<h3>Set your chat options</h3>
<label>Name:</label> <br>
<input type="text" ng-model="chatName" > <br>
<p>{{chatName}}</p>
<label>Description:</label> <br>
<input type="text" ng-model="chatDes" > <br>
<label>Width:</label> <br>
<input type="text" ng-model="myWidth"> <br>
<label>Height:</label> <br>
<input type="text" ng-model="myHeight"> <br>
<h3>Style your chat</h3>
<label>Header background:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myBackground"> <br>
<label>Text color header:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColor"> <br>
<label>Text color description:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColordes"> <br>
<h3>Social media</h3>
<p>Want to add social media?</p>
<input type="checkbox" ng-model="showsocialpanel"/>
<label>Yes</label>
<input type="checkbox"/>
<label>No</label> <br/>
<div ng-show="showsocialpanel">
<h3>Style your footer:</h3>
<label>Powered By:</label> <br/>
<input type="text" ng-model="poweredBy"/> <br/>
<label>Your background footer:</label> <br/>
<input type="text" class="color {hash:true}" ng-model="mySocialbg"/> <br/>
<h3>Add your social</h3>
<input type="checkbox" ng-model="facebookiconshow"/><label>Facebook</label> <br/>
<input type="text" ng-show="facebookiconshow" ng-model="facebooklink"placeholder="http://www.facebook.com"/>
<br/>
<input type="checkbox" ng-model="twittericonshow"/><label>Twitter</label> <br/>
<input type="text" ng-show="twittericonshow" ng-model="twitterlink"placeholder="http://www.twitter.com"/>
<br/>
<input type="checkbox" ng-model="linkediniconshow"/><label>Linkedin</label><br/>
<input type="text" ng-show="linkediniconshow" ng-model="linkedinlink"placeholder="http://www.linkedin.com"/>
</div>
</div>
</div>
<div class="col-lg-10">
<div ui-view></div>
</div>
</div>
</div>
The fullscreen HTML:
<div id="chat_box" ng-style="{width:myWidth}">
<div id="chat_top">
<div id="chat_avatar">
</div>
<div id="chat_header" ng-style="{background: myBackground}">
<h4 ng-style="{color:myColor}">{{chatName}}</h4>
<p ng-style="{color:myColordes}">{{chatDes}}</p>
</div>
</div>
<div id="chat_container">
<div id="history_div" ng-style="{height:myHeight}">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" rows="0"
type="text" maxlength="75" onkeypress="chatHandler(event)"></textarea>
<div class="social_media" ng-show="showsocialpanel" ng-style="{background:mySocialbg}">
<ul>
<li ng-show="facebookiconshow">
<a ng-href="{{facebooklink}}" target="_blank">
<img src="assets/img/facebook.png" alt="Facebook Icon"/>
</a>
</li>
<li ng-show="twittericonshow">
<a ng-href="{{twitterlink}}" target="_blank">
<img src="assets/img/twitter.png" alt="Twitter Icon"/>
</a>
</li>
<li ng-show="linkediniconshow">
<a ng-href="{{linkedinlink}}" target="_blank">
<img src="assets/img/linkedin.png" alt="Linkedin Icon"/>
</a>
</li>
</ul>
</div>
</div>
</div>
The JS:
var bmiChatbuilder = angular.module('bmiChatbuilder', ['ui.router'])
bmiChatbuilder.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/")
$stateProvider
.state('fullscreen', {
url: "/fullscreen",
templateUrl: "fullscreen.html",
controller:"myCtrl"
})
})
bmiChatbuilder.controller('myCtrl', function ($scope) {
$scope.chatName = 'Type your text tittle here';
$scope.chatDes = 'Type your description here';
$scope.myWidth = '800px';
$scope.myHeight = '400px';
})
Thanks in advance for your help.
Router creates new myCtrl instance with it's own scope. You can create service to share data between two controllers or create another controller type for /fullscreen.