I have this Angular.js UI-Bootstrap issue. The typeahead-template-url="typeahead/bind-node.html" is not rendering the expression's {{}} in the typeahead template. I am not sure why. In Chromium debugger, I verified this in element inspector where there are literal {{match}} instead of the expression evaluated.
I also have verified with 'console.log()' that the objects being returned to getNodeLabel($viewValue) are good.
Html:
<input type="text" id="label" name="label" ng-model="$parent.node.id" typeahead-min-length="1"
placeholder="Node Name / Label"
typeahead-template-url="typeahead/bind-node.html" style="width:350px;"
typeahead-editable="false"
typeahead="dropDownItem as dropDownItems.label for dropDownItem in getNodeLabel($viewValue)"
typeahead-loading="loadingNodeLabels" class="form-control" required>
<i ng-show="loadingNodeLabels" class="glyphicon glyphicon-refresh"></i>
typeahead html:
<script type="text/ng-template" id="bind-node.html">
<a>
{{match}}
<span bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-binding">
<i>{{match.label}}</i>
<h1>{{match}}</h1>
</span>
</a>
</script>
id="bind-node.html" needs to be id="typeahead/bind-node.html"
Related
I have this little piece of code in my html page
<div class="input-group">
<input type="text" class="form-control" name="telefono" id="field_telefono" ng-model="vm.indirizzo.telefono" telefono required/>
<span class="input-group-addon" role="button" uib-popover="{{'theFoodApp.indirizzo.informativa' | translate}}" data-popover-title="{{'theFoodApp.indirizzo.informativa-title' | translate}}" data-popover-placement="top" data-popover-append-to-body="true">
<span class="glyphicon glyphicon-question-sign white"></span>
</span>
</div>
Is possibile open the uib-popover when I focus on the input text?
popover-trigger="'focus'"
You could also use ng-focus and ng-blur directives to trigger a toggle variable that is passed to popover-is-open="".
I'm serving a form from Django into an angular-ui-bootstrap modal using the template property:
function openFinderModal() {
var modalInstance = $modal.open({
template: vm.modalTemplate,
});
The relevant part of the modal template served from a form view:
<div class="modal-body" >
<form ng-controller="ServiceFinderModalController">
{% csrf_token %}
{{ form }}
</form>
</div>
I'm then using django-angular to create an ng-model on each form field (see the docs), corresponding to my simple form below:
class ServiceSelectionForm(NgModelFormMixin, NgForm):
service_0 = forms.BooleanField()
However, when I attempt to access this form field from $scope I get undefined.
function ServiceFinderModalController($scope) {
console.log($scope.service_0);
}
I've inspected the source of the page and it seems as though it should work (see second last line):
<form ng-controller="ServiceFinderModalController" class="ng-pristine ng-valid ng-scope">
<input type="hidden" name="csrfmiddlewaretoken" value="dkH6aiHyIqqkJlN5xAbiYaX0c37tXb9U">
<ul class="djng-form-errors ng-hide" ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.$pristine">
<li ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.$message" class="invalid ng-binding ng-hide" ng-bind="U2VydmljZVNlbGVjdGlvbkZvcm0.$message"></li>
</ul>
<ul class="djng-form-errors ng-hide" ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.$dirty"></ul>
<label for="id_service_0">Test 2</label>
<ul class="djng-field-errors ng-hide" ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.service_0.$pristine">
<li ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.service_0.$message" class="invalid ng-binding ng-hide" ng-bind="U2VydmljZVNlbGVjdGlvbkZvcm0.service_0.$message"></li>
</ul>
<ul class="djng-field-errors ng-hide" ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.service_0.$dirty"></ul>
<input id="id_service_0" name="service_0" ng-model="service_0" type="checkbox" class="ng-pristine ng-untouched ng-valid ng-empty">
</form>
I've tried doing things like $scope.$digest() but get [$rootScope:inprog] errors.
UPDATE
The $scope becomes aware of this field once it has been toggled. Now I just need to figure out a way to do this from the get go...
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
I've a form with input controls which I need validate, but the angularjs validation doesn't work as I expected, something I'm doing wrong
This is a control of my form, between tags
<form id="addServiceForm" name="addServiceForm">
<div class="form-group has-feedback" ng-class="{'has-error': addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}">
<label class="control-label" for="qty">Cantidad</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-shopping-cart"></i></span>
<input id="qty" name="qty" type="text" class="form-control" placeholder="Ingresa cantidad" ng-model="service.quantity" ng-required="true"/>
</div>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" id="helpBlockQty" class="help-block">La cantidad es requerida.</span>
</div>
</form>
If I assign ng-class = "'has-error'" directly it works as expected, but when I put conditions like this:
ng-class="{'has-error':addServiceForm.description.$invalid && addServiceForm.description.$dirty}"
Nothing occurs, it doesn't works as I need.
I'm begginer using angularjs and bootstrap, please be patient with me =(
The problem with your code is that there is no condition set on your input such as ng-minlength to tell Angular when .$valid or .$invalid should return true. So Angular just defaults to ng-minlength="1" and the error is never displayed inless you delete all letters.
You should also look into the $submitted method, it is very nice for form validation.
<form id="addServiceForm" name="addServiceForm">
<div class="form-group has-feedback" ng-class="{'has-error': addServiceForm.qty.$invalid && addServiceForm.qty.$dirty}">
<label class="control-label" for="qty">dirty: {{addServiceForm.qty.$dirty}} invalid: {{addServiceForm.qty.$invalid}}</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-shopping-cart"></i></span>
<input id="qty" name="qty" type="text" class="form-control" placeholder="Ingresa cantidad" ng-model="service.quantity" ng-required="true"
ng-minlength="4"/>
</div>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">
Another Div
</span>
<span ng-show="addServiceForm.qty.$invalid && addServiceForm.qty.$dirty" id="helpBlockQty" class="help-block">La cantidad es requerida.</span>
</div>
</form>
finally I could resolve the problem, for a unknown reason the form could not be positioned immediately after the div with the controller inside. I just moved the code at last part of my html before the closing div, and with this move my form works exactly as I need.
Thanks for all your comments and recommendations.
If someone knows why this is necessary, I hope you share.
Regards
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