I want to add smart search to the dropdown in grails angularjs application. Does any one know how I can do that ? I get the data for the list from a table through MySQL.
I use ng-model and ng-option. I use the following code.
<select class="something" id="filter.customer.id" name="filter.customer.id"
ng-model="ctrl.customer"
ng-option="ctrl.customer"
<option value=""><{something}</option>
</select>
You can add a filter to a ng-options.
Here I created an input to search a customer ID. The data in the select will be filtered from this value.
<input type="text" ng-model="search"></input>
<select ng-model="selectedCustomer" ng-options="c as c.id for c in customers | filter: {id: search}"></select>
Check this demo application example
Related
I have an array, that consists a list of json objects as items. I am using this array as an options list for two select controls, here I want to hide first select control selected items in second select control options list.
Is it possible to do?
I don't know why are you looking for a pipe/filter solution when it can be done so easily without pipe? I may not be knowing entire scenario of yours but what you have written according to that a simple solution would be,
<select class="form-control" [(ngModel)]="selectedCity">
<option *ngFor="let ct of cities" [value]="ct.id">{{ct.name}}
</select>
// look at [disabled]="selectedCity==ct.id"
<select class="form-control" [(ngModel)]="selectedOtherCity">
<option [disabled]="selectedCity==ct.id" *ngFor="let ct of cities" [value]="ct.id">{{ct.name}}
</select>
detailed code could be found here : https://plnkr.co/edit/gkvFqtyddLVEsFOE07Ls?p=preview
I have a Simple Multiselect checkbox dropdown. As I have given below.
<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple="" required>
<option ng-repeat="service in services" value="{{service.id}}">{{service.name}}</option>
</select>
Now I want that some checkbox like index 1,3,5 comes with selected checkbox.
My AngularJS Code is given below.
$scope.article_edit = function(articles) {
$scope.services = [$scope.model[0], $scope.model[1]];
}
Then What I need to do for that ??
Thanks
Why not use ng-options which has good support & also ng-model on select field. So your template can be:
<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple=""
required ng-model="selected" ng-options="service as service.name for service in services">
</select>
Working plunker example
In my angularjs application view.html, I have following code as shown below:
<select ng-model="models.category">
<option ng-repeat="category in categories" value="{{ [category.id , category.title] }}">
</select>
When i access models.category using expression.
{{ models.category}}
The output is.
[1,"sports"]
But, all i want is to display is 1 and sports in different part of my application view.
You could do this by doing the following
{{category.id + ' ' + category.title}}
I personally think it's even better to use ng-options if you use a select because the ng-model used on the select is always a string if you use ng-repeat
<select name="mySelect" id="mySelect"
ng-options="option.title for option in categories track by option.id"
ng-model="models.category"></select>
and on another part of you application you can use the models.category.titleand models.category.id.
I am using bootstrapDualListbox
JS
$('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({
moveOnSelect: false
});
HTML
<select multiple="multiple" size="10" name="duallistbox_demo1[]" ng-model="selectedStaff"><option ng-repeat="staff in staffs" value="{{staff.userId}}">{{staff.firstName}} {{staff.lastName}}</option>
</select>
If I use options as different values(not from ngRepeat) swapping is fine. If I use from ng-repeat, on selection all values are swapping rather selected. How I solve this?
Please check using ng-options with select instead of options with ng-repeat.
<select multiple="multiple" size="10" ng-options="staff as staff.firstName for staff in staffs track by staff.userId" name="duallistbox_demo1[]" ng-model="selectedStaff">
I have an ng-repeat that creates a table of data. Each entry has several properties, including IP Address, MAC Address, author and more. I have a textbox that automatically sorts IP address, but I also want to provide a dropdown that allows users to select which property they would like to filter by.
For example, the default behavior is that by typing "12" into the box, only entries with "12" in the IP Address will be displayed. But if the user selects "Author" from the dropdown and types "Mark" into the textbox, only entries with "Mark" as the author will be displayed.
I tried setting the textbox's ng-model to "selectFiler.value" but that didn't work.
<form>
<select ng-model="selectFilter">
<option value="incident_at">Incident Date</option>
<option value="ip_addr" selected="selected">IP Address</option>
<option value="mac_addr">MAC Address</option>
<option value="created_at">Created On</option>
<option value="author">Author</option>
<select>
<input type="text" placeholder="Search by IP" ng-model="filterTable.ip_addr">
</form>
Here's some code, but because I'm using ui-router and templates for the full project I can't get the data to display in Plunker:
http://plnkr.co/edit/kNqx1g3HidEM0ORzsSJt?p=preview
How can I make this work?
Try using typeahead from angular-bootstrap library.