I recently updated the Angular UI bootstrap. When page load I am getting this error-
Error: [$compile:tplrt] Template for directive 'uibTypeaheadPopup'
must have exactly one root element.
uib/template/typeahead/typeahead-popup.html
My template file which has the input tag has proper root element.
<div>
<div class="form-row">
<div class="form-cell"><label class="control-label">Cc : </label></div>
<div class="form-cell">
<input name="ccClientInput" type="text" ng-model="asyncSelected"
uib-typeahead="address as address.SearchDisplay for address in clientCcSearch.getClients($viewValue)"
typeahead-loading="loadingLocations"
typeahead-editable="false"
typeahead-wait-ms="300"
placeholder="Search for colleagues"
class="clientcc-search">
<div>
<span ng-repeat="client in CcClients">
<span class="clientcc">
<span class="client-tooltip" tooltip tooltip-contents="createTooltip(client)">{{client.Name}}</span>
<span ng-click="removeClientCC($index)" class="cursor-pointer ccCl">
<i class="icon-remove-on-s"></i>
</span>
</span>
</span>
</div>
</div>
</div>
The problem is that, You have not closed one of the <div> element.
Issue was spelling mistake in the tpls while adding it to grunt.
Thanks,
RZ
Related
If zipcode is empty then form is invalid so button is disabled but if zipcode is 2 digits error message is showing but form is showing as valid in controller. If zipcode is empty then I need to disable button but I'm checking form valid or not but dont worry about ng-disabled. I just need solution for showing the "div" if and only if form is valid.
function submitUserDetail (formValid) {
if(formValid) {
$scope.showDiv = true;
}
}
<div class="">
<div class="">
<label required>
Zip code required
</label>
<label pattern>
Invalid Zip code
</label>
</div>
<div class="">
<input type="tel" maxlength="5" class="" name="zip5"
ng-model="userDetail.zipCode" required=""
pattern="^\d{5}$"
data-validate-on-blur="true" value=""
size="5">
<span class="" title="Reset" onclick="jQuery(this).prev('input').val('').trigger('change');"></span>
</div>
</div>
<div class="">
<div class="">
<div class="">
<span class=""></span>
<button class="" href="#" id="button" ng-click="submitUserDetail(form.$valid)" ng-disabled="form.$invalid">See section</button>
<span class=""></span>
</div>
</div>
</div>
<div ng-if="showDiv">
.......
</div>
Thanks in advance.
I assume that you have a <form> wrapping the HTML provided.
If so, you should make sure your <form> tag has novalidate applied so you're using AngularJS form validation and not HTML5 form validation:
<form name="form" ng-submit="submitUserDetail(form.$valid)" novalidate>
Also, it looks like you're mixing HTML5 validation attributes with AngularJS validation attributes. You should be using ng-required and ng-pattern instead of required and pattern.
I am trying to build a form in boostrap angular-ui modal, and am having an issue with using the default bootstrap grid in the modal-body
I build a row and then immediately build a col-md-6 followed by another col-md-6 and it is overflowing and colums are not next to each other like I would expect. I'm at a loss on this one.
Here is the HTML I have for the modal
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
<span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span>
<form>
<div class="row">
<div class="col-md-6">
<input type="text" ng-model="Name" class="form-control" placeholder="Full Name"/>
</div>
<div class="col-md-6">
<input type="text" ng-model="Name" class="form-control" placeholder="Your Email" />
</div>
</div>
</form>
</div>
I know it's bad practice to link to your site, but I don't know any other way to demonstrate this behavior.
The "Sign Our Guestbook" link is how the modal that I am referencing is opened.
The extra space you are seeing which is causing the overflow onto the new line is caused by your <span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span> due to a conflict between the position styles. The size and padding of the icon is still being set in place even though it's moved.
Because your close icon:
<span class="glyphicon glyphicon-remove HoverMe pull-left CloseModalDark" ng-click="cancel()"></span>
Its styles include position: relative;, which occupies 26px width of the .row. So the right input box is squeezed to next line. Make it position:absolute and adjust the left and top value. It will work.
I'm new to using AngularJS and UI Bootstrap and I'm trying to add dropdowns dynamically using ng-repeat. The problem is that when any one dropdown is clicked it triggers all of them. I'm guessing I'm doing something really stupid with my code and I would appreciate it if someone could point me in the right direction on how to make this code work:
<div class="form-group" data-ng-repeat="item in ctrl.items">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="" name="itemDescription" data-ng-model="item.description">
</div>
<div class="col-sm-5">
<div class="input-group">
<input type="tel" class="form-control" placeholder="" name="value" data-ng-model="item.value">
<div class="input-group-btn" dropdown is-open="ctrl.isOpen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li></li>
</ul>
</div>
</div>
</div>
The problem is that with more than one dropdown, a click results in all dropdowns being triggered and its probably something really easy but I'm having a hard time with it.
Appreciate any help
/Regards Kris
The issue is is-open="ctrl.isOpen". You are binding the opening of all of them with ctrl. It should be bound to something distinct for each repeat, i.e. something like is-open="item.isOpen"
i 'm using jquery plugin with angular , the problem is plugin works without ng-switch but doesn't work with ng-switch .
Any idea ?Thanks in advance
Demo
<ng-switch on="data">
<div ng-switch-when="true" class="form-group">
<label class="sr-only" for="exampleInput3">تاریخ</label>
<div class="input-group">
<div class="input-group-addon" data-MdDateTimePicker="true" data-trigger="click" data-targetselector="#exampleInput3">
<span class="glyphicon glyphicon-calendar"></span>
</div>
<input type="text" class="form-control" id="exampleInput3" placeholder="تاریخ" data-MdDateTimePicker="true" data-placement="right" />
</div>
</div>
<div class="leftWrapper" ng-switch-default>
say Hi
</div>
</ng-switch>
The reason why it doesn't work is Jquery plugin has no idea to where to send click event (in your case) when ng-if recreates DOM. And for sure it doesn't trigger digest cycle.
To make it work you can do it by two ways:
or create directive for jQuery plugin (for me more appropriate)
or change to ng-show/hide see DEMO. ngShow directive shows or hides the given HTML element on CSS level
For DOCS see ng-if
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....