I use Angular Translate to translate my webapp. I can translate some label, phrase but when i want to translate a phrase which contains a link. The text raw is displayed.
I want to display a check box :
My json file :
"cgu":"Accept our Terms and conditions"
My check box in form :
<div class="form-group">
<div class="">
<label for="cgu">
<input type="checkbox" id="cgu" ng-model="cgu" checked>
{{"global.form.cgu" | translate}}
<div ng-bind-html-unsafe="global.form.cgu | translate"></div>
</label>
</div>
</div>
Here is what is displayed: the raw text and not the link :
I've tried the solution :
stackoverflow post 1
and this one
Nothing is working.
You need to tell angular translate to compile the translated string (s. "Post compiling" at the angular translate homepage).
<span translate="{{ global.form.cgu }}" translate-compile></span>
Related
I have a html as follows
<input ng-required="true" ng-model="Email" type="text" value="">
and i have a div as follows:
<div id="invalid" style="display: none">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
How can i make it that as soon as the user types in the input then the div is no longer visible or hidden using Angularjs. I know i need to use ng-show or hide but i cant seem to figure out how to put it together with the input ?
If you are using components it will look like this:
<div id="invalid" data-ng-hide="$ctrl.Email">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
If you are using old controller style:
<div id="invalid" data-ng-hide="Email">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
I am creating a form where i need to add bootstrap typehead for auto complete functionality.
<input [(ngModel)]="model.brand" [typeahead]="model.brands" ng-model-options="{'updateOn': 'blur'}"
(typeaheadOnSelect)="brandOnSelect($event)" (typeaheadNoResults)="brandNoResults($event)"
[typeaheadOptionField]="'Value'" class="form-control" ngcontrol="brand" >
<div *ngIf="brand.dirty && !brand.valid ">
<p *ngIf="brand.errors.required" class="text-help">{{ required | translate }}</p>
</div>
But the vaalidations are alws failed even if i select value from the list.
enter image description here
but the values are updated in model as follows
ngcontrol="brand"
should be
ngControl="brand"
^
I have built an angular app which searches through a load of objects.
The problem is that the search filters match any part of the string returning irrelevant searches.
for example.
If I search the name Steve
the results will bring up both steve , eve and steven. I want the search results to return steve and steven.
Plunkr:
https://plnkr.co/edit/awN5ZxIpZ3fJJUkD5k6Y
Code
<input id="search-input" ng-model="searchTerm" placeholder="Search">
</div>
<ul class="search-ul">
<li class="search-list" ng-if="searchTerm.length > 2" ng-repeat="item in SearchItems| filter:searchTerm">
<div class="button-wrap">
<img class="icon" src="{{item.image}}" />
</div>
<span class="text">{{item.name}}</span>
</li>
</ul>
Reproducing with an object that only has a name field, I get results as expected ('steve' and 'steven' only). This suggests that it is matching on something other than the name field.
If you want your filter to ONLY use the item.name field then use the following:
<li class="search-list" ng-if="searchTerm.length > 2" ng-repeat="item in SearchItems| filter:{name:searchTerm}">
Please refer Angular material.
https://docs.angularjs.org/api/ng/filter/filter
For strict search you have to tag the object property to search field.
For example to filter name
<input ng-model="searchTerm.name"></label>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
Also try setting strict
ng-repeat="item in SearchItems| filter:searchTerm:strict"
How to validate using ng-messages like ng-maxlength when the <textarea> has a ui-tinymce attribute?
Or is there a better way?
<div class="form-group">
<div class="col-sm-12">
<label>Description</label>
<p class="small">Please provide as much detailed information as possible.</p>
<textarea name="description" class="form-control required" ui-tinymce="tinymceOptions" ng-model="aC.testData.description"
ng-maxlength="100" required></textarea>
<div class="help-block" ng-messages="mainForm.description.$error" ng-show="mainForm.description.$touched">
<p ng-message="required">A description is required.</p>
<p ng-message="maxlength">Description must not exceed 100 characters.</p>
</div>
</div>
</div>
The issue you are seeing is that the standard directives just count characters so a simple (empty) HTML sample:
<p></p>
Would indeed show as 7 characters when in reality there is no "visible" content. I built a custom directive for another editor and what I ended up doing is using jQuery's .text() function against the HTML. This removes all of the HTML tags and provides an approximation for the number of actual text characters in the editor. This is a portion of the code in the diective:
var jStrippedString = jQuery(modelValue).text().trim();
return (maxlength < 0) || ngModelCtrl.$isEmpty(jStrippedString) || (jStrippedString.length <= maxlength);
I believe that you would want to create a custom Attribute directive that allows you to grab the model data for the editor and perform this validation yourself.
Adding forced_root_block: "" to the tinymce options should also work. By default it will not add <p></p> from the start.
I am using angularjs to repeat radio button groups with the following code.
<div class="row observation-point"
ng-repeat="observationPoint in question.observationPointList">
<div class="col-md-6 col-sm-6">
<small>{{observationPoint.text}}</small>
</div>
<div class="col-md-4 col-sm-4 col-md-offset-2 col-sm-offset-2">
<label class="radio-inline">
<input type="radio" ng-disabled="observation.status != 'Open'"
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-1" ng-value="true"
ng-model="observationPoint.observed">{{'observation-domain.html.yes' | translate}} {{observationPoint.observed}}
</label>
<label class="radio-inline">
<input type="radio" ng-disabled="observation.status != 'Open'"
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-0" ng-value="false"
ng-model="observationPoint.observer">{{'observation-domain.html.no' | translate}}
</label>
</div>
</div>
With angular 1.2.28 this worked fine, however we've recently upgraded to 1.4.2 and now the result is as in the picture below.
The model values are correctly saved and restored (see the true and false values in the image) in the variables, but only the last radio button in the ng-repeat is selected after reloading the page.
Why is this happening, because I really don't understand what the problem is and how to fix this.
nb. observationPoint.observer contains a boolean value not a string
EDIT: i've created a simplified plunker and of course this works as intended :S
http://plnkr.co/edit/tWjizHB8I5FNZVOgdq6J?p=preview
Which would suggest something is wrong with the naming or id's.
However when I check with the developer tools id and name seem fine
I've found a solution, if I change the dynamic names from
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
to
name="observationPoint_{{observationPoint.id}}"
it works without a hitch. I presume there is some sort of loading/timing issue going on. The variables are probably not unique at the moment the UI is rendered and causes only the last item to be set.