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....
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?
I have two input forms, Date To and Date From that I want to repeat using ng-repeat. Right now, it's a block oh HTML text and I'm not sure what's the most efficient way of doing this except concatinating all the div elements the js side with the plus symbol.
ex. '<div class="container"> + bla bla + ...'
<div class="modal-body">
<!--Time From-->
<div class="row">
<div class="col-md-3 date-and-time-from" >
<label>Date/Time From</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[0].startDateTime" placeholder="From"></ms-date-time-picker>
</span>
</div>
</div>
</div>
<!--Time To-->
<div class="row">
<div class="col-md-3 date-and-time-to" >
<label>Date/Time To</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[0].endDateTime" placeholder="To" ></ms-date-time-picker>
</span>
</div>
</div>
</div>
</div>
The goal of my application is that a user chooses how many bookings he will store in his array in the first modal. Then he clicks a button, and the above html text will appear in the second modal. Based on the number of bookings the user chooses (let's say 3), the html above will repeat 3 times in a modal (there will be 3 Date From/Date To forms in a vertical list).
Any suggestions would be appreciated!
It is simple to use ng-repeat just go through the documentation here.
I see that in your question you are appending divs like:
htmlString ='<div id="1">Bla</div>'+'<div id="2">Bla</div>';
ngRepeat directive will be used on the HTML itself. Like this:
arrayOfItems = [1,2,3]; //in your controller
<!-- in your html -->
<div ng-repeat="item in arrayOfItems" id="{{item}}">
Bla
</div>
First Modals HTML
Number of bookings:
<input type="text" ng-model="numberOfBooking" name="numberOfBooking" />
<button type="button" ng-click="confirmNumberOfBooking()">Confirm Booking</button>
First Modal Controller
$scope.numberOfBooking = 1;
$scope.newResource.bookings = [
{
fromDateAndTime: "datetime",
toDateAndTime: "datetime"
}
];
$scope.confirmNumberOfBooking = confirmNumberOfBooking;
function confirmNumberOfBooking(){
for(var i = 0; i < $scope.numberOfBooking; i++){
$scope.newResource.bookings.push({fromDateAndTime: "datetime",toDateAndTime: "datetime"});
}
}
Second Modal HTML
<div ng-repeat="booking in newResource.bookings track by $index">
<!--Time From-->
<div class="row">
<div class="col-md-3 date-and-time-from" >
<label>Date/Time From</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng model="newResource.booking[$index].startDateTime" placeholder="From"></ms-date-time-picker>
</span>
</div>
</div>
</div>
<!--Time To-->
<div class="row">
<div class="col-md-3 date-and-time-to" >
<label>Date/Time To</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[$index].endDateTime" placeholder="To" ></ms-date-time-picker>
</span>
</div>
</div>
</div>
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 using angularjs for the front-end of my web app. I currently have a comments view that contains multiple reply and edit forms (due to ng-repeat). How could I rewrite the code below so form validation can be applied appropriately to each of the forms (currently the code is only showing a form for reply comment). I have tried using ng-form, but I was unsuccessful.
<div class="comments">
<div ng-hide="comments.length>0||angular.isUndefined(comments)" ng-cloak>
<p class="center">No comments yet, be the first one!</p>
</div>
<div class="comment clearfix" ng-repeat="comment in comments track by $index"
style="padding-left:{{comment.margin}}px">
<div class="body" style="padding-left:60px">
<span ng-hide="comment.edit_mode">{{comment.comment}}</span>
<div ng-show="comment.edit_mode">
<textarea msd-elastic="" ng-model="comment.comment" class="form-control" rows="1">{{comment.comment}}</textarea>
</div>
</div>
<div class="add-comment reply" ng-show="open_reply" ng-cloak>
<form name="form.replyForm" class="form-inline clearfix" role="form"
ng-submit="Submit(reply.comment,story.id,reply.anonymous,comment.comment_id,$index);open_reply=false;reply.comment=''"
novalidate>
<div id="comment-form">
<img ng-src="{{user.avatar}}" alt="" class="avatar"/>
<span>
<textarea msd-elastic ng-model="reply.comment" class="form-control message" rows="1"
placeholder="Add a comment..." ng-click="show_reply_anonymous_checkbox=true"
focus-on="open_reply" name="comment" required></textarea>
<span style="color:red" ng-show="form.replyForm.comment.$error.required">test</span>
</span>
<button type="submit" ng-disabled="form.replyForm.$invalid"
class="btn btn-primary submit">
Reply
</button>
</div>
</form>
</div>
</div>
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>