Cara Membuat Edit Data Menggunakan AngularJs Part1

Edit data adalah suatu perubahan yang terjadi pada data. Dan akan saya bahas pada artikel tentang Cara Membuat Edit Data Menggunakan AngularJs Part1. Data yang akan saya edit adalah data yang akan saya tampilkan pada suatu table data yang ketika saya ketik tombol edit maka akan muncul dalam form input untuk melakukan perubahan datanya sesuai id yang saya klik.

Cara Membuat Edit Data Menggunakan AngularJs Part1 kita buat struktur html seperti di bawah ini.

<!doctype html>
<html lang="en" ng-App="myApp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

    <title>Cara Membuat Edit Data Menggunakan AngularJs</title>
  </head>
  <body ng-controller="myCon">
    <div class="container">
      <div class="row">
        <div class="col">
          <h1 class="text-center">Cara Membuat Edit Data Menggunakan AngularJs</h1>
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Title</label>
              <input type="text" ng-model="title" class="form-control" placeholder="Title">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Description</label>
              <input type="text" ng-model="desc" class="form-control"  placeholder="Desc">
            </div>
            <input type="hidden" ng-model="id">
            <input type="submit" class="btn btn-primary" ng-click="submit()" value="{{btnName}}">
          </form>
          <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Judul</th>
                <th scope="col">Isi</th>
                <th scope="col">Aksi</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat ="data in datas">
                <th scope="row">{{data.id}}</th>
                <td>{{data.title}}</td>
                <td>{{data.body}}</td>
                <td><button type="button" class="btn btn-outline-primary btn-sm" ng-click="editData(data.id, data.title, data.body)">Edit</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Pada artikel ini saya tidak akan menjelaskan tentang cara menampilkan data, karena saya anggap teman teman sudah mengerti untuk menampilkan datanya dan saya akan focus untuk menjelaskan struktur html yang akan digunakan untuk edit data. Jika teman-teman perhatikan disini saya buat sebuah tombol edit yang berisikan direktif ng-click=”editData(data.id, data.title, data.body). Tombol tersebut akan kita klik jika datanya ingin di edit dan ng-click dengan fungsi editData() akan dijalankan dengan membawa 3 data melalui parameter.

Demikian artikel tentang Cara Membuat Edit Data Menggunakan AngularJs Part1. Kita akan lanjutkan untuk membuat fungsi edit data dengan angular dan script php untuk melakukan update data di database pada artikel Cara Membuat Edit Data Menggunakan AngularJs Part2.