檢查父母是否被選中。角2打字稿

Question

下面是圖片

This Image shows all unchecked checkbox

I wanted to happen if the child is checked all parents will be check

這裏是我的樹我的樣子

 

    [ 
     { 
     "id": 1, 
     "parent_category_id": 0, 
     "name": "General", 
     "description": "Doloremque voluptas veniam architecto consectetur beatae.", 
     "slug": "general", 
     "position": 1, 
     "is_default": 0, 
     "created_at": "2016-04-11 07:00:48", 
     "updated_at": "2016-04-11 07:00:48", 
     "deleted_at": null, 
     "post_count": 0, 
     "subcategories": [ 
      { 
      "id": 5, 
      "parent_category_id": 1, 
      "name": "Magazine", 
      "description": "This is the magazine category", 
      "slug": "magazine", 
      "position": 1, 
      "is_default": 0, 
      "created_at": "2016-04-11 07:55:35", 
      "updated_at": "2016-04-11 08:08:19", 
      "deleted_at": null, 
      "post_count": 0, 
      "subcategories": [ 
       { 
       "id": 6, 
       "parent_category_id": 5, 
       "name": "Life Style", 
       "description": "The Life Style Magazine", 
       "slug": "life-style", 
       "position": 1, 
       "is_default": 0, 
       "created_at": "2016-04-11 08:07:10", 
       "updated_at": "2016-04-11 08:07:10", 
       "deleted_at": null, 
       "post_count": 0, 
       "subcategories": [ 

       ] 
       } 
      ] 
      } 
     ] 
     }, 
     { 
     "id": 2, 
     "parent_category_id": 0, 
     "name": "Rush Business Cards", 
     "description": "Voluptatem nam similique et rem ratione laudantium.", 
     "slug": "rush-business-cards", 
     "position": 1, 
     "is_default": 0, 
     "created_at": "2016-04-11 07:00:48", 
     "updated_at": "2016-04-11 07:00:48", 
     "deleted_at": null, 
     "post_count": 0, 
     "subcategories": [ 

     ] 
     }, 
     { 
     "id": 3, 
     "parent_category_id": 0, 
     "name": "Flyers", 
     "description": "Consequatur molestiae enim necessitatibus vero et eum sint.", 
     "slug": "flyers", 
     "position": 1, 
     "is_default": 0, 
     "created_at": "2016-04-11 07:00:48", 
     "updated_at": "2016-04-11 07:00:48", 
     "deleted_at": null, 
     "post_count": 0, 
     "subcategories": [ 

     ] 
     }, 
     { 
     "id": 4, 
     "parent_category_id": 0, 
     "name": "Brochures", 
     "description": "Ratione magnam repellendus quo commodi enim.", 
     "slug": "brochures", 
     "position": 1, 
     "is_default": 0, 
     "created_at": "2016-04-11 07:00:48", 
     "updated_at": "2016-04-11 07:00:48", 
     "deleted_at": null, 
     "post_count": 0, 
     "subcategories": [ 

     ] 
     } 
    ] 

這裏是我的檢查每一個複選框代碼。

updateCategory(category) { 
    category.selected = (category.selected) ? false : true 
    let myCategory = _.findWhere(this.postDetail.categories,{id: category.id}) 
    if(_.isUndefined(myCategory)) 
     this.postDetail.categories.push(category) 
    else 
     this.postDetail.categories = _.without(this.postDetail.categories, _.findWhere(this.postDetail.categories, { id: category.id })); 


} 

這裏是一個指令，我創建了我的所有複選框，並使用EventEmitter在我的指令中發送事件。

import {Component, Input, Output, ElementRef, EventEmitter} from 'angular2/core'; 
 
import { PostService } from './post.service'; 
 

 
@Component({ 
 
    selector: 'node', 
 
    providers: [], 
 
    template: ` 
 
    <div class="checkbox3 checkbox-success checkbox-inline checkbox-check checkbox-round checkbox-light"> 
 
     <input (change)="updateCategory(node)" type="checkbox" attr.id="category-{{ node.id }}" [(ngModel)]="node.selected"/> 
 
     <label attr.for="category-{{ node.id }}"> 
 
      {{ node.name }} 
 
     </label> 
 
    </div> 
 
    <ul *ngIf="node.subcategories != null"> 
 
     <li style="list-style: none;"><node *ngFor="#n of node.subcategories" [node]="n"></node></li> 
 
    </ul> 
 
    `, 
 
    directives: [Node] 
 
}) 
 
export class Node { 
 
    @Input() node; 
 
    @Input() public postDetail : Object = []; 
 
    @Output() public emitter: EventEmitter<any> = new EventEmitter(); 
 

 
    constructor(private _service: PostService) { 
 

 
    } 
 

 
    updateCategory(node) { 
 
    this.postDetail = { name: 'checkbox', data:node} 
 
    this._service.emitEvent.next(this.postDetail); 
 
    } 
 
}

Answer 1

這是很難理解你做了什麼，似乎有與代碼中的許多問題。

但這裏的基本想法是，當node.selected是一個節點上的變化，發出與所選

@Output() public nodeSelected: EventEmitter<Node> = new EventEmitter(); 

updateCategory(node) { 
    this.nodeSelected.next(this); 
    } 

在父HTML節點的標記節點的事件添加事件處理程序：

<node *ngFor="#n of node.subcategories" [node]="n" (nodeSelected)="onChildSelected($event)"> 

Parent上的onChildSelected函數可以檢查節點的狀態並標記自己，並再次提出事件。