This is the currency code I used to use before making it is-static
| currency('£')
This is my input field as of now without the currency -
<input v-bind:class="{'is-static': !foodItem.editing}" type="text" class="input" v-model="foodItem.price">
When I implement it myself it keeps messing it all up, any idea how to add that currency to my input, many thanks in advance.
You can use if else block:
<div v-if="!foodItem.editing">{{ foodItem.price | currency('£') }}</div>
<div v-else>{{ foodItem.price }}</div>
You're applying is-static class when the value of foodItem.editing returns false. So, in that condition you'll get currency filter applied.
Related
I am using Angular material autocomplete and I am trying to select value using #Input and form control. Almost everything is working fine. I am setting value using input like this:
#Input() set startingPointValue(value) {
this.control.setValue(value, { emitEvent: false });
this.resizeInput();
}
And the value of the input is properly set but when I open autocomplete, an option which should be selected don't have mat-selected class so basically there is no indication which option was selected and this is confusing. When I click same option again class is added.
Is there a way to do that using setValue or I need to use something else?
This is my autocomplete HTML:
<mat-form-field class="starting-point-filter-container">
<mat-label>{{ label }}</mat-label>
<input
id="inputStartingPoint"
#startingPointInput
matInput
placeholder="Type to filter results"
type="text"
[formControl]="control"
[matAutocomplete]="startingPointAutocomplete"
spellcheck="false"
/>
<mat-icon class="starting-point-icon--dropdown">arrow_drop_down</mat-icon>
</mat-form-field>
<mat-autocomplete
#startingPointAutocomplete="matAutocomplete"
[displayWith]="displayName"
(opened)="scrollToSelected()"
>
<perfect-scrollbar class="select-scrollbar" [config]="scrollBarConfig" #scrollFilterContainer>
<mat-optgroup
*ngFor="let group of groups"
[label]="group.name"
[class.mat-optgroup-no-label]="!group.name"
class="starting-point-group-container"
#scrollToContainer
>
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.id }}
</mat-option>
</mat-optgroup>
</perfect-scrollbar>
</mat-autocomplete>
Any help will be appreciated
Edit:
I created StackBlitz with autocomplete: https://stackblitz.com/edit/angular-ivy-mqwwky. You can inspect option number 2 after init. There is no class .mat-selected on it. You need to click it manually to set it properly. Question is how to do that during init?
I am trying to filter some results using the selected value from an ng-select (stripping out formatting and other irrelevant information) I have:
<select ng-model="medium" ng-options="medium as medium.name for medium in mediaList" ng-change="loadSubMediums(medium)"></select>
Here, the loadSubMediums function takes medium with its properties and console.logs the correct medium that I choose. For reference to something working the way I expected:
<input type="text" class="search-query form-control" placeholder="Search" ng-model="searchText" />
This ng-model is "searchText" and works excellent to filter this ng-repeat:
<div class="card" ng-repeat="artist in featured | filter:searchText | filter:medium.name">
The problem is the second filter. I've tried variations on medium, medium.name, {{medium.name}}, trying to access the $scope. I have spend so much time banging my head on the wall, and it seems like it could be so straight forward.
Any thoughts?
This is exactly what I was trying to do:
Is this correct? plnkr.co/edit/IwvetYNB0tLVWcLZGG50?p=preview
I have the following requirement,
I have an array as customers (values such as cust1,cust2,cust3).
I have textbox, in which when I enter some values it will filter the customers arraylist and displays my result (For example : if i enter cust1 in textbox, it will display cust1)
If the value entered in textbox not in the arraylist (customers), i want to change textbox colour to red.
Could anyone guide to do this.
My approach
<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="filter.name" /> -- I want to change this textbox colour
<br/>
<ul>
<li ng-repeat="cust in customers | filter : filter.name | orderBy:name">{{cust.name}} {{cust.city}}</li>
</ul>
<br/>
The solution for this is rather simple.
First, you need to modify your ng-repeat in the following way:
ng-repeat="cust in customers | filter : filter.name | orderBy:name as filteredCustomers"
Notice the as filteredCustomers in the end. This saves the resulting filter to $scope.filteredCustomers.
Then, you just have to modify your input to use a conditional CSS class:
<input type="text" ng-model="filter.name" data-ng-class="{'red': filteredCustomers.length === 0}" />
Also you will have to define the .red CSS class with background-color: red; or something similar.
Proof of concept: http://jsbin.com/diyehagemo/2/
In my application need to do multiple search hint when i type the key word in the text box.
It should display from my DB Skills. When i type first text i can see the hint but I want to show the hint by typeing separated as comma for new key words (i.e) Java , AngularJs, ...
here is my code:
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<input type="text" ng-model="selected" typeahead="skill for skill in skills | limitTo:8"
class="form-control">
</div>
I am stuck with this. Thanks in Advance.
I used ngtagsInput, It's useful for tagging and highlighting information right on the input box.
see the link : http://mbenford.github.io/ngTagsInput/demos
I'm trying to multiple a value x months.
In the input value i'm using this Jquery Plugin to do the currency mask.
But, the operations doesn't work with the plugin. I want to multiply the value, including cents.
JSFIDDLE
<div ng-app>
Months: <input type="text" ng-model="months"><br/>
Value:<input type="text" class="mony" ng-model="value"><br/>
Total: <input type="text" disabled="true" value="{{months*value | currency}}">
</div>
In your case the value becomes formatted string that is not understood as a number.
So multiplication does not work.
In Angular it is discouraged to use jQuery to modify DOM, all modifications should be done from Directives.
So the best solution is to find the formater directive or create your own. Just search for something like "angularjs mask input".
Or maybe you can create controller and one of its methods will parse your string back into Number. If you still want to stick with jQuery without directive.