Angular2 - 清除使用ngFor循环创建的多个输入字段

时间:2016-06-30 19:18:40

标签: angular

以下是我所拥有的简化版本......

组件:

...
ngOnInit() {

    items = [
      {
          "image": "/img1.jpg",
          "answer" : "item1"
      },
      {
          "image": "/img2.jpg",
          "answer" : "item2"
      },
      {
          "image": "/img3.jpg",
          "answer" : "item3"
      },
    ]

}

verify(event:any, i) {
    ...checking if the input matches its answer. No problem here.
}

html模板:

<template ngFor let-item let-i="index" [ngForOf]="items">
    <li>
       <div style="background: url('{{item.image}}')"></div>
        <input type="text" [(ngModel)]="item.input" (keyup)="verify($event, i)">
    </li>
</template>

<button type="button" (click)="clearFields()"></button>

clearFields()函数如何工作?我不想使用重新路由,因为在同一页面上可能有其他类似的组件。

1 个答案:

答案 0 :(得分:1)

你可以制作这样的功能:

    function activar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/activate',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
    function desactivar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/deactivate',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
    function eliminar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/eliminar',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
</script>