小编Tom*_*ato的帖子

我正在创建一个填充了<div>元素的页面.包含这个div的容器有display: flex;.因此项目自动包装到几行.现在我想点击一个项目,这样就会打开另一个项目,其中<div>包含有关所选项目的信息.但是这个信息div应该位于包含所选div和容器全宽的行下面.

我不知道如何做这项工作.我做了一个简单的JsFiddle开头:https://jsfiddle.net/44j4jnq4/3/

我正在获得click事件和dynamiccaly添加带有Angular的dinfo div.我的问题主要是关于如何设置样式,以便它不会弄乱弹性项目并且具有容器的宽度.

我也有这个图像可视化我想要的东西.

希望你能帮助我.

我必须使用 Typescript 使用 AngularJs 1.5.8 进行以下设置：

我有一个包含目录（项目的二维数组）的父组件。从我将目录中的每个列表传递给子组件的位置：

...
export class ParentController {

    private catalog = []; //contains a list of lists

    ...

    private printCallback(item: any): void {
        console.log(item);
    }
}

和模板：

<div ng-repeat="list in $ctrl.catalog">
    <child content="list" callback="$ctrl.printCallback(item)"></child>
</div>

现在在子组件中，我再次遍历列表中的每个项目。每当我单击列表中的项目时，我都希望父项知道我单击的项目：

export class ChildComponent implements IComponentOptions {
template: any = require('./child.component.html');
public bindings: any = {
    content: '<',
    callback: '&'
};
controller: any = ChildController;
}

export class ChildController {

    public content: Array<any>;
    public callback;

    ...

    public onTrigger(item: any): void { …