代码之家 › 专栏 › 技术社区 › j0w

角度5在模式中添加或编辑列表中的项目

edit angular5 modal-dialog typescript list

j0w · 技术社区 · 6 年前

我目前拥有的:

<div class="container">

  <!-- The table displaing the list of item -->
  <table class="table table-sm table-hover">
    <tr>
      <button class="btn btn-danger">
        <i class="fa fa-add"></i>Remove</button>
      <button class="btn btn-success" data-toggle="modal" data-target="#addOrUpdateModal">
        <i class="fa fa-add"></i>Add policy</button>
    </tr>
    <tr>
      <th class=""></th>
      <th>#</th>
      <th>Name</th>
      <th>Options</th>
    </tr>
    <tr *ngFor="let policy of dataSource | paginate: { itemsPerPage: 10, currentPage: p }">
      <td>
        <input type="checkbox"> </td>
      <td>{{policy.id}}</td>
      <td>{{policy.name}}</td>
      <td>
        <a class="btn" (click)="showForEdit(policy)" data-toggle="modal" data-target="#addOrUpdateModal">
          <i class="fa fa-pencil-square-o"></i>
        </a>
        <a class="btn text-danger" (click)="delete(policy.id)">
          <i class="fa fa-trash-o"></i>
        </a>
      </td>
    </tr>
  </table>

</div>
<!-- Pagination directive -->
<div class="container">
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>


<!-- the modal i'd like to use for add and update data -->

<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addOrUpdateModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">

            <!-- The inputs i want to fill with clicked item -->
            <input type="hidden" class="form-control" value=""/>
            <input type="text" class="form-control" placeholder="Name" value=""/>

          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" (click)="addOrUpdate()">Do smthg</button>
      </div>
    </div>
  </div>
</div>

(新增Angular5/TypeScript和JavaScript。比如……所有这些都要3周的时间,所以,对于愚蠢的问题,我很抱歉…)

1 回复 | 直到 6 年前

Karnan Muthukumar 6 年前

试试这个,这里我使用了双向数据绑定。

类型脚本文件,

    //here declared variable
    name:any;
    id:number;

    showForEdit(policy){
      //here you can access your *ngFor looped dataSource data like (policy.id, policy.name)
      this.name=policy.name; //here iam assinging name value to variable.
      this.id=policy.id;
    }

   addOrUpdate(){
      console.log("Your Name Data here",this.name);
      console.log("Your Id Data here",this.id);
   }

 <form role="form">
      <div class="form-group">            
            <input type="hidden" class="form-control" name="id" [(ngModel)]="id" value=""/>
            <input type="text" class="form-control" name="name" [(ngModel)]="name" placeholder="Name" value=""/>
       </div>
 </form>

https://angular.io/guide/forms

import { FormsModule, ReactiveFormsModule } from '@angular/forms'

 imports: [
    FormsModule, //here
    ReactiveFormsModule,
 ]

对于重置,

this.name='' 
this.id='';

this.form_name.reset();

Reset input value in angular 2