angular filter on search and checkbox - javascript

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 '>

Related

Angular 4 check multiple checkboxes

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

Accessing objects in Angularjs

Is it possible to get age object's value with the name object on following mentioned AngularJS expression:
{{{name: 'Jhon', age: '15' }.name}}

You can do something like below:
<div>
Name = {{ {name: 'Jhon', age: '15' }.name | json }}
</div>
<div>
Age = {{ {name: 'Jhon', age: '15' }.age | json }}
</div>
Have a look at the demo.

Yes, but with a slight modification Eg.
({key : 1}).key
But you cannot use this object elsewhere. So there is no point in creating such objects unless you are referring via a variable.

Angular ng-repeat search for two fields of an object

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.

Sencha Touch Changing/updating the store values

Hi I have a store with name and values, I want to change/update the values of the store based on the user selection in settings screen.
suppose I have data like this
data: [
{firstName: 'Tom',value:1},
{firstName: 'Ed',value:2},
{firstName: 'Jam',value:3},
{firstName: 'Aar',value:4},
{firstName: 'Dav',value:5},
{firstName: 'Mic',value:6}
]
When user changes settings (I am storing this change of settings in global variable), all values should change to multiples of 2 as below
and update my view with these new values.
data: [
{firstName: 'Tom',value:2},
{firstName: 'Ed',value:4},
{firstName: 'Jam',value:6},
{firstName: 'Aar',value:8},
{firstName: 'Dav',value:10},
{firstName: 'Mic',value:12}
]
I need some idea how to implement this and best way to do it.

After change setting, try this
var store = Ext.getStore('StoreName');
store.removeAll();
store.add(newData);

each function of store solved my problem
var store = Ext.getStore('StoreName');
if(settings changed condition){
store.each(function(record) {
record.set('value', (record.get('value')* 2));
record.dirty = true;
});
store.sync();
}

Convert String containing list of JSON objects to Object Array

A String contains list of Objects which are serialized in JSON format, how to convert that to list of JSON Objects like given in example below preferably without using jQuery.
Eval, Stringyfy Json.parse etc dont seems to help here.
[
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever#gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou#gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef#gmail.com'}
];
Update:- JSON String
[
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6yAAA"},"Name":"Stella Pavlova","Phone":"(212) 842-5500","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6yAAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6zAAA"},"Name":"Lauren Boyle","Phone":"(212) 842-5500","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6zAAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt70AAA"},"Name":"Babara Levy","Phone":"(503) 421-7800","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt70AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt71AAA"},"Name":"Josh Davis","Phone":"(503) 421-7800","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt71AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt72AAA"},"Name":"Jane Grey","Phone":"(520) 773-9050","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt72AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt73AAA"},"Name":"Arthur Song","Phone":"(212) 842-5500","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt73AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt74AAA"},"Name":"Ashley James","Phone":"+44 191 4956203","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt74AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt75AAA"},"Name":"Tom Ripley","Phone":"(650) 450-8810","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt75AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt76AAA"},"Name":"Liz D'Cruz","Phone":"(650) 450-8810","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt76AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt77AAA"},"Name":"Edna Frank","Phone":"(650) 867-3450","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt77AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt78AAA"},"Name":"Avi Green","Phone":"(212) 842-5500","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt78AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt79AAA"},"Name":"Siddartha Nedaerk","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt79AAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt7AAAQ"},"Name":"Jake Llorrac","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt7AAAQ"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6rAAA"},"Name":"Rose Gonzalez","Phone":"(512) 757-6000","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6rAAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6sAAA"},"Name":"Sean Forbes","Phone":"(512) 757-6000","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6sAAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6tAAA"},"Name":"Jack Rogers","Phone":"(336) 222-7000","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6tAAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6uAAA"},"Name":"Pat Stumuller","Phone":"(014) 427-4427","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6uAAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6vAAA"},"Name":"Andy Young","Phone":"(785) 241-6200","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6vAAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6wAAA"},"Name":"Tim Barr","Phone":"(312) 596-1000","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6wAAA"},
{"attributes":{"type":"Contact","url":"/services/data/v30.0/sobjects/Contact/0039000000wvt6xAAA"},"Name":"John Bond","Phone":"(312) 596-1000","CreatedDate":"2014-05-15T06:17:48.000+0000","Id":"0039000000wvt6xAAA"}
]

I edited your post to make it more visibly clear, so maybe now you'll see: The value you posted as your "JSON String" is actually a JavaScript array of objects; exactly what you're claiming you're trying to convert the string into. You should read up more on JSON so you fully understand how you can convert to and from JSON, but that's already a valid JavaScript object -- you don't need to do anything to it.
Here's a JSFiddle showing this fact in action -- all you need to do is set a variable equal to the block of code you're receiving, and you can access it as a normal array/object. http://jsfiddle.net/ZpXVh/
var array = /* your really long code */;
alert(array[1]['name'];

Categories