Question

这是图片

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在我的指令上发送事件。

＆＃13;

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);
  }
}

＆＃13;

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)">

父级的onChildSelected函数可以检查节点的状态并标记自己，并再次引发事件。

如果检查孩子，请检查父母。 Angular 2 Typescript

1 个答案: