Say i have the following array
$scope.myArr = [{
name: 'Marc Rasmussen',
phone: 239470192,
title: 'It Dude',
description: 'Hello my name is Marc i am testing the fact that i can search for two fields in an object'
}, {
name: 'Louise',
phone: 1234567890,
title: 'HR Director',
description: 'I am also testing'
}, {
name: 'Leonardo',
phone: 123499,
title: 'Actor',
description: 'I have never won an oscar'
}];
Now as you can see i have the following fields:
name
phone
title
description
Now i repeat these using ng-repeat
<div ng-repeat="obj in myArr">
<div>
name: {{obj.name}}
</div>
<div>
phone: {{obj.phone}}
</div>
<div>
title: {{obj.title}}
</div>
<div>
description: {{obj.description}}
</div>
</div>
Now what i want is that i want a single textfield to search for results in both the name and description and no other field
Normally you would care a variable such as $scope.search.$ but this would search in all fields. alternativly you could make an input field for each field however this does not forfill what i wish to accomplish.
So my question is how can you make 1 input search for two fields at the same time?
here is a fiddle of the above code:
Fiddle
I believe this article might help you out:
Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)
Essentially taking advantage of angular's filter and using a predicate function on each item in the repeated array.
Related
I wanted to implement mat select box or just html select box with live search functionality and found mat-select-search project implemented in https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.html.
It is working perfectly fine but it requires a lot of configuration and in my project I have more than 5 mat-selects with pretty large data set, then found "ngx-select-dropdown" it has minimum configuration but I couldn't configure it for typscript objects, it is working with single type string array.
Here is code
export class AppComponent {
public items: string[] = ['Amsterdam', 'Antwerp', 'Athens','Barcelona',
'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
'Zagreb', 'Zaragoza', 'Łódź'];
public ngxControl = new FormControl();
public inputTyped = (source: string, text: string) =>
console.log('SingleDemoComponent.inputTyped', source, text);}
html
<ngx-select [formControl]="ngxControl"
[allowClear]="true"
[defaultValue]="doNgxDefault()"
[items]="items"
placeholder="No city selected"
(typed)="inputTyped('ngx-select', $event)"
</ngx-select>
However I wanted to implement it with this type of items
interface Bank {
bank_id: number;
name: string;
code: string;
ord: number;}
private items: Bank[] = [
{bank_id: 1, name: 'Bank A (Switzerland)', code: 'ARM', ord:10},
{bank_id: 2, name: 'Bank B (Switzerland)', code: 'ARM', ord:11},
{bank_id: 3, name: 'Bank C (Switzerland)', code: 'HIO', ord:12},
{bank_id: 4, name: 'Bank D (Switzerland)', code: 'ARM', ord:13},
{bank_id: 5, name: 'Bank E (Switzerland)', code: 'ARM', ord:14},];
Is it possible use typscript objects with ngx-select for items, because I need to populate the names of each object and get the id's as value property to integrate with database. I am sure that it is possible extracting the names with loop and searching matching options with names but it is not best practice I think.
Updated Answer
Since items:[] gets array of objects property names of items should be exactly as documentation of ngx-select
interface Bank {
id: string;
text: string;
}
Yes its possible. you need see API document https://optimistex.github.io/ngx-select-ex/
optionValueField string 'id' Provide an opportunity to change the name an id property of objects in the items
optionTextField string 'text' Provide an opportunity to change the name a text property of objects in the items
<ngx-select [formControl]="ngxControl"
[allowClear]="true"
[defaultValue]="doNgxDefault()"
[items]="items"
[optionValueField]="bank_id"
[optionTextField]="name"
placeholder="No city selected"
(typed)="inputTyped('ngx-select', $event)"
</ngx-select>
<ngx-select
[(ngModel)]="Value Which You Selected"
[allowClear]="true"
[items]="Bank"
optionTextField="bank_id"
placeholder="Type your Value Here">
<ng-template ngx-select-option ngx-select-option-selected let-option let-text="text">
<span class="color-box" [style]="option.value"></span>
<span [innerHtml]="text" style="color: black"></span>
/ {{option.data.name}} / {{option.data.code}} / {{option.data.ord}}
</ng-template>
</ngx-select>
Assign your Full array in [Items]="" and use the another key values in ngx Template
{{option.data.name}}
{{option.data.code}}
{{option.data.ord}}
If you want to stay with angular material, you can also create your custom wrapper component to avoid boilerplate code, see e.g. Angular ngx-mat-select-search Custom Component.
The wrapper component behaves like a form control and you can adjust it to your needs.
I am new to web development and AngularJS and I have been struggling with how to go about this. Sorry for the bad English.
I use an ng-repeat that creates the correct number of dropdowns I need as this needs to be dynamic. The dropdowns have a label like:
Test1: <dropdown here>
Test2: <dropdown here> ...etc.
I have a HTTP request that returns an array. If the array has "Test1 State1" in it, I would like the dropdown for Test1: to change to State1 on default. (continues with all the Tests)
How can I go about this?
HTML
<div ng-repeat="o in options track by $index">
<label for="{{::$o}}" class="col-xs-3">{{o}}:</label>
<select id="{{::$o}}" ng-model="stateModel"
ng-options="state.changeToState for state in states"
ng-change="onStateSelect(stateModel.platformReleaseNotes, o)">
{{state}}
</select>
</div>
$scope.states = [
{
changeToState: 'State1',
notes: 'Hello World'
},
{
changeToState: 'State2',
notes: 'Goodbye'
},
{
changeToState: 'State3',
notes: ' is State3'
},
{
changeToState: 'State4',
notes: ' is State4'
}
];
You cannot share model if you want to have different values for all drop downs.
ng-model should be different for all drop downs and this can be achieved by having array of drop downs as below.
$scope.dropDowns = [{
dropDownName: 'Test1:',
id: 'test1',
selectedOption: ''
}, {
dropDownName: 'Test2:',
id: 'test2',
selectedOption: ''
}];
see the running example in
http://plnkr.co/edit/jsAn1jwGkQfxXK5I9G6J?p=preview
I have a form with User roles displayed as multiple checkboxes:
<div *ngFor="let role of roles">
<label for="role_{{role.id}}">
<input type="checkbox" ngModel name="roles" id="role_{{role.id}}" value="{{role.id}}"> {{role.name}}
</label>
</div>
the roles object loaded from server looks like this which have all the roles that displayed on the form:
{id: 1, name: "HQ", description: "A Employee User", created_at: "2017-10-07 10:43:17",…}
1
:
{id: 2, name: "admin", description: "A Manager User", created_at: "2017-10-07 10:43:17",…}
2
:
{id: 3, name: "caretaker", description: "", created_at: null, updated_at: null}
now i want to set multiple check boxes using form.setValue, my user object loaded from server looks like this:
"roles" in the user object are the roles that are assigned to the user and needs to be checked on the form
{
"id":13,
"name":"Wasif Khalil",
"email":"wk#wasiff.com",
"created_at":"2017-10-07 10:43:17",
"updated_at":"2017-10-09 07:45:34",
"api_token":"LKVCGPGnXZ3LyiCnyiTAg8XTpck6xWlVkeoMBgtoYZWoAOy4b5epNqMz7KG7",
"roles":[
{"id":2,"name":"admin","description":"A Manager User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"2","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17"}
},
{"id":1,"name":"HQ","description":"A Employee User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"1","created_at":null,"updated_at":null}
}
]
}
after loading user object form server im setting values like this:
this.form.setValue({
name: user.name,
email: user.email,
password:"",
confirm_password:"",
roles: [1] //here im not sure how to set roles
});
can someone help me check the checkboxes with the loaded user roles object.
Thanks in advance
EDIT:
Sorry for not explaining it well, i have edited my question to explain the question again:
the roles on user object are the roles that are assigned to user
and the roles object is the list of all roles to display in form, look at the image below:
You don't have to use reactive forms to make it done.
HTML
<input ...[checked]="check(user.roles,role.id)" ...>
Typescript:
check(value1, value2){
return (value1.filter(item => item.id == value2)).length
}
DEMO
Please help me to resolve this problem.
I have the object
vm.users = {
helpers: {
name: 'John Smith',
uid: 2094
},
foremen: {
name: 'Michael Duglas',
uid: 2389
}
}
User can create a select which contains foremans, helpers and grouped by role names.
When user choose foreman or helper, other selects should be updated and hide already selected foremen or helpers.
You can see my attached picture for more information.
I find answer from this question but this is not complete.
I want to get working solution.
I have an angular app where I'm displaying a list of people. I have an input that I'm using to filter the list based on the string in the input.
Each person in the list also has an status string. I added a checkbox next to the string filter but I'm not sure how I can apply this to my filtering.
I'd like the string to filter on first/last name and the checkbox to filter on status
Full Fiddle code
the search filter is bound like this:
input type='text' ng-model='filterText'/>
<input type='checkbox'/> <!-- how do I get this to work -->
<ul>
<li ng-repeat='person in people | filter:filterText'>
<span class=''>{{person.firstname}}</span>
<span class=''>{{person.lastname}}</span> -
<span class='color-oj'>{{person.status}}</span>
</li>
</ul>
$scope.people = [
{firstname: 'abdul', lastname: 'ahmad', status: 'active'},
{firstname: 'mahmud', lastname: 'samrai', status: 'active'},
{firstname: 'gasser', lastname: 'badawi', status: 'inactive'},
{firstname: 'ibtihaj', lastname: 'jasim', status: 'active'},
{firstname: 'abudi', lastname: 'ahmad', status: 'inactive'},
{firstname: 'ahmad', lastname: 'jasim', status: 'active'},
{firstname: 'abdul', lastname: 'samrai', status: 'inactive'}
];
This code is based on your fiddle, which is a little different than what you have posted here.
First, give you checkbox a model:
<input type='checkbox' ng-model='active'/>
Second, change your filter slightly:
<li ng-repeat='person in people | filter:filterText | filter:{isActive:active} '>
Initially active is undefined so all people are displayed. Once you check the checkbox active will have a value and filter accordingly.
Demo Fiddle
If you have more than one field you can use a strict search.
<input type='checkbox' ng-model='search.isActive'/>
<input type='checkbox' ng-model='search.anotherField'/>
you make an object with the field names matching the fields on the object your are filtering
<li ng-repeat='person in people | filter:filterText | filter:search:strict '>