The problem that i am facing is as follows: If i were to select a particular tag/author from the Tags/Author dropdown, the results are getting narrowed down as expected; however, when i click the 'Clear' button, the content disappears. I have to refresh the page for all the results to be displayed again.
I have another application using the same logic and in that clicing the 'Clear' button does not lead to the results disappearing. So i'm a bit concerned as to why it's working in one instance and not in the other.
I'd appreciate if you can help me understand where i'm going wrong here.
The foll is a part of my filter logic:
<md-input-container>
<label>Enter Search Term</label>
<input type="text" ng-model="classifiedsFilter">
</md-input-container>
<md-input-container>
<label>Tags</label>
<md-select ng-model="tag">
<md-option ng-repeat="tag in tags | orderBy: 'toString()'" value="{{ tag }}"> <!-- tags here refers to a newly defined array that stores only one instance of all the tags against the 'tags' property on each object/word -->
{{ tag }}
</md-option>
</md-select>
</md-input-container>
The foll are my filters on md-card:
<md-card ng-repeat="classified in classifieds | filter: classifiedsFilter | filter: tag:true | filter: expression | filter: book:true | filter: author:true | orderBy: order" flex-xs="100" flex-sm="40" flex-gt-sm="30" class="classified">
Related
I have this markup:
<md-input-container class="md-block" flex-gt-sm>
<label>Language</label>
<md-select name="languageAndLocale" ng-model="$ctrl.voice.languageAndLocale" required>
<md-option ng-value="language2" ng-repeat="language2 in $ctrl.languagesAndLocales">
{{language2}}
</md-option>
</md-select>
</md-input-container>
and in my component i try to insert value to this field.
self.voice.languageAndLocale = "eng";
$scope.voiceForm.languageAndLocale = "eng";
How can I trigger autocomplete if I want to add just a prefix via code?
say the drop down contains eng:en and I set the field via code to be eng so I want it to be auto completed to eng:en as would have happened if i insert eng in the UI and no via code.
Generally i have an object of objects -> filteredDrivers.
Single object looks like this:
DRIVER_ID: 99
DRIVER_NAME: "JOHN SNOW"
which i'm using in md-autocomplete:
<md-input-container>
<input type="text"
name="driver"
mdInput
[mdAutocomplete]="auto"
placeholder="Driver"
ngModel
>
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let driver of filteredDrivers| async" [value]="driver"
ngDefaultControl>
{{ driver.DRIVER_NAME}}
</md-option>
</md-autocomplete>
And i want to pass whole object by submitting a form but in input i want to view just driver.DRIVER_NAME.
If i pass whole driver like [value]="driver" in input i see [object Object]
and form submit gives me full object
but when i go with [value]="driver.DRIVER_NAME" i can see what i want - JOHN SNOW but form submit gives me only driver.DRIVER_NAME
How can i pass whole object by submitting the form and see only driver.DRIVER_NAME property in input?
It's clearly documented in the Angular Material docs for
Autocomplete.
Specifically:
Setting separate control and display values
If you want the option's control value (what is saved in the form) to
be different than the option's display value (what is displayed in the
actual text field), you'll need to set the displayWith property on
your autocomplete element. A common use case for this might be if you
want to save your data as an object, but display just one of the
option's string properties.
To make this work, create a function on your component class that maps
the control value to the desired display value. Then bind it to the
autocomplete's displayWith property.
<md-input-container>
<input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</md-option>
</md-autocomplete>
Trying to use the following code from the Angular examples page:
<md-input-container>
<label>Vegetables</label>
<md-select ng-model="selectedVegetables"
md-on-close="clearSearchTerm()"
data-md-container-class="selectdemoSelectHeader"
multiple>
<md-select-header class="demo-select-header">
<input ng-model="searchTerm"
type="search"
placeholder="Search for a vegetable.."
class="demo-header-searchbox md-text">
</md-select-header>
<md-optgroup label="vegetables">
<md-option ng-value="vegetable" ng-repeat="vegetable in vegetables |
filter:searchTerm">{{vegetable}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
But this is the error I get:
Error: can only have one child input, textarea or select element!
The example can be found here (look for Select Header): https://material.angularjs.org/latest/demo/select
Well as i said on the comments the problem was the version of your Angular-material
Try to update it to the lastest version 1.0.9 or 1.1.0 and make a try.
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js">
I have created a typeahead using the angular-ui library.
My current typeahead html is:
<input name="customers" id="customers" type="text" placeholder="enter a customer" ng-model="selectedCustomer" uib-typeahead="customer.firstName for customer in customers | filter: $viewValue | limitTo:8" class="form-control" typeahead-editable="false">
Basically the typeahead search works ok but when i select the type ahead i want to retrieve all the fields which are attached to the customer record such as surname , address etc. The typeahead gets populated into property called $scope.customers in my controller which is done via an ajax call to the api to get all customers.
So on selection how can i get all the fields related to the selected customer?
Cheers
Change the uib-typeahead attribute:
<input name="customers" id="customers" type="text" placeholder="enter a customer" ng-model="selectedCustomer" uib-typeahead="customer as customer.firstName for customer in customers | filter: $viewValue | limitTo:8" class="form-control" typeahead-editable="false">
This will set the selected customer to the ng-model selectedCustomer.
I have ui-select element used with help angular-formly field type. I have defintion like this:
<ui-select ng-model="model[options.key]" theme="bootstrap" ng-required="{{to.required}}" ng-disabled="{{to.disabled}}" reset-search-input="false">,
<ui-select-match placeholder="{{to.placeholder}}">,
{{$select.selected[to.labelProp || \name\]}},
</ui-select-match>,
<ui-select-choices group-by="to.groupBy" repeat="option[to.valueProp || \value\] as option in to.options | filter: $select.search">,
<div ng-bind-html="option[to.labelProp || \name\] | highlight: $select.search"></div>,
</ui-select-choices>,
</ui-select>
I am looking for a way to turn off filtering, turning off type ahead option, so this element would act more like regular select with its look.
Also when feed with value - via model - when clicked to expand selection on list become not in synch with value - it is selecting first value on list instead value driven by model - when "clicked away" goes to normal. Is it a setting for it ?
Use UI Bootstrap Typeahead feature. Hope it is lightweight and easy.
<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
<h4>Static arrays</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>
In your controller, have a states array.