angular2 forms - Checkbox filter in Angular 2 -


i have array of objects (tasks) in table , 2 checkboxes: "night", "day".

i want next scenario: if checkbox night checked, tasks property "night" left in table. if checkbox day checked, tasks property "day" left in table (and "night" tasks left if checkbox "night" still checked). , third checkbox "reset" resets filter.

maybe it's better use way sorting, example pipes?

here's plunkr. here's code:

@component({   selector: 'my-app',   template: `     <input type="checkbox" (click)="getnight()">night     <input type="checkbox" (click)="getday()">day     <input type="checkbox">uncheck     <br><br>     <table>       <tr *ngfor="let task of tasks">         <td>{{task.chkboximageurl}}</td>         <td>{{task.id}}</td>         <td>{{task.val}}</td>       </tr>     </table>   `, }) export class app {   tasks: array<{chkboximageurl: string, id: string, val: string,  checked:boolean}> = [     {chkboximageurl: "http1", id: "item1", val: "night", checked: false},     {chkboximageurl: "http2", id: "item2", val: "day", checked: false},     {chkboximageurl: "http3", id: "item3", val: "night", checked: false},     {chkboximageurl: "http4", id: "item4", val: "day", checked: false},     {chkboximageurl: "http4", id: "item4", val: "morning", checked: false},     {chkboximageurl: "http4", id: "item4", val: "evening", checked: false}   ];    getnight() {    console.log(this.tasks[2].val); // night     // return this.tasks.filter(obj => obj.checked).map(obj => obj.val);    if(this.tasks.val == 'night') {     return this.tasks.filter(obj => obj.checked).map(obj => obj.val == 'night');    } else {      console.log('666666');    }   };   getday() {    return this.tasks.filter(obj => obj.checked).map(obj => obj.val);   };   getcheckedcount(){     return this.getcheckedvalues().length;   } }

updated plunkr here

in order filter tasks array night , day checkbox values need accessible. 1 way of doing creating instance variables night , day , using ngmodel directive bind them respective checkboxes.

component:

night: boolean = false; day: boolean = false;

view:

<input type="checkbox" [(ngmodel)]="night">night <input type="checkbox" [(ngmodel)]="day">day

night , day true when checked , false when unchecked. these values can used filter tasks array.

component:

interface task {   chkboximageurl: string;   id: string;   val: string;   checked:boolean; }  gettasks(): array<task> {   return this.tasks.filter(obj => this.night && obj.val === 'night' || this.day && obj.val === 'day'); }

view:

<tr *ngfor="let task of gettasks()">

the gettasks() method returns array of tasks, filtered conditionally on values of night , day. bound view.

to clear checkboxes when uncheck checkbox checked, values of night , day can reset false.

component:

uncheck() {   this.night = false;   this.day = false; }

view:

<input type="checkbox" (click)="uncheck()">uncheck

on click, other checkboxes reset changes result of gettasks()


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more