Cara menggunakan "ng-model" di AngularJS dengan CONTOH

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

ng-model di AngularJS mengikat kontrol input secara langsung ke properti pada $scope, keeping Tampilan dan model disinkronkan dalam kedua arah. Bagian di bawah ini membahas atribut tersebut, tiga contoh praktis, dan kesalahan yang paling sering dilakukan oleh pemula.

  • 🔗 Penjilidan Dua Arah: ng-model memasukkan input pengguna ke dalam properti $scope dan secara otomatis mengirimkan perubahan controller kembali ke kontrol.
  • 📝 Pengikatan Textarea: Kaitkan string multi-baris ke textarea dan gunakan urutan escape \n untuk memaksa pemisah baris dalam nilai yang ditampilkan.
  • ☑️ Status Kotak Centang: Kotak centang yang terikat dengan ng-model menyimpan nilai boolean, sehingga nilai true akan membuat kotak tersebut dicentang dan nilai false akan membuatnya tidak dicentang.
  • 📋 Daftar Dropdown: Isi elemen select dengan ng-options dan ikat item yang dipilih ke properti model terpisah.
  • ⚠️ Kegagalan Umum: Mengikat elemen select ke objek yang sama yang menyediakan teks opsi akan menimpa objek tersebut pada pemilihan pertama.
  • ️ Hook Validasi: ng-model menambahkan kelas ng-pristine, ng-dirty, ng-valid, dan ng-invalid yang mendorong penataan gaya bersyarat dan pemeriksaan formulir.
Baca Selengkapnya

Apa itu ng-model di AngularJS?

ng-model adalah sebuah directive di AngularJS yang merepresentasikan model, dan tujuan utamanya adalah untuk mengikat "view" ke "model". Apa pun yang diketik pengguna ke dalam sebuah kontrol akan langsung ditulis ke dalam sebuah properti pada $scope, dan apa pun yang ditulis pengontrol ke properti tersebut akan langsung dikirim kembali ke kontrol.

Sebagai contoh, anggaplah Anda ingin menampilkan halaman sederhana kepada pengguna akhir seperti yang ditunjukkan di bawah ini, yang meminta pengguna untuk memasukkan "Nama depan" dan "Nama belakang" di dalam kotak teks. Kemudian Anda ingin memastikan bahwa informasi yang telah dimasukkan pengguna tersebut tersimpan dalam model data Anda.

Anda dapat menggunakan direktif ng-model untuk memetakan kolom teks "Nama depan" dan "Nama belakang" ke model data Anda. Direktif ini akan memastikan bahwa data di "view" dan data di "model" Anda selalu sinkron, tanpa perlu menambahkan kode penanganan event sama sekali.

⚠️ Catatan versi: AngularJS (cabang 1.x) telah mencapai akhir masa pakainya pada 31 Desember 2021 dan tidak lagi menerima patch keamanan. Contoh di bawah ini masih berjalan, tetapi di Angular modern, pengikatan dua arah yang sama ditulis sebagai [(ngModel)] dan membutuhkan FormsModule.

Atribut ng-model

Seperti yang dibahas di bagian sebelumnya, atribut ng-model digunakan untuk mengikat data dalam model Anda ke tampilan yang disajikan kepada pengguna.

Atribut ng-model digunakan untuk,

  1. Mengikat kontrol seperti input, area teks, dan elemen pilihan dalam tampilan ke dalam model.
  2. Menyediakan perilaku validasi — misalnya, validasi dapat ditambahkan ke kotak teks sehingga hanya karakter numerik yang dapat dimasukkan.
  3. Mempertahankan status kontrol. Yang dimaksud dengan status adalah bahwa kontrol dan data selalu dijaga agar tetap sinkron: jika nilai data berubah, nilai pada kontrol akan berubah secara otomatis, dan sebaliknya.
  4. Mengekspos status tersebut sebagai kelas CSS. AngularJS menambahkan ng-pristine, ng-dirty, ng-valid ke ng-invalid ke setiap kontrol yang membawa ng-model, yang membuat penataan gaya bersyarat pada formulir menjadi mudah.

Setelah memahami atribut tersebut, langkah selanjutnya adalah menerapkannya pada tiga jenis kontrol yang paling sering Anda temui.

Cara menggunakan ng-model

1) Area Teks

Tag area teks digunakan untuk menentukan kontrol input teks multi-baris. Area teks dapat menampung karakter dalam jumlah tidak terbatas, dan teks ditampilkan dalam font dengan lebar tetap.

Sekarang mari kita lihat contoh sederhana bagaimana kita dapat menambahkan direktif ng-model ke kontrol area teks. Dalam contoh ini, kita ingin menunjukkan bagaimana kita dapat mengirimkan string multi-baris dari controller ke view dan melampirkan nilai tersebut ke kontrol area teks.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        <textarea rows="4" cols="50" ng-model="pDescription"></textarea>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS";
    });
</script>
</body>
</html>

Code Penjelasan:

  1. The arahan model-ng melampirkan variabel anggota yang disebut “p”Description” ke kontrol “textarea”. “pDescriptVariabel "ion" menyimpan teks yang diteruskan ke kontrol area teks. rows="4" ke cols="50" Atribut tersebut hanya mengatur ukuran kontrol agar teks multi-baris ditampilkan dengan benar.
  2. Variabel anggota “p”Descript"ion" diberi nilai multi-baris. The \n Urutan escape di dalam string itulah yang memaksa teks ke baris kedua saat textarea menampilkannya.

Keluaran:

Dari outputnya, jelas terlihat bahwa teks multi-baris yang ditetapkan di controller ditampilkan di kontrol area teks, terbagi menjadi dua baris tepat di tempat \n duduk.

ARTIKEL TERKAIT

2) Elemen masukan

Direktif ng-model juga berfungsi dengan elemen input biasa. Di bawah ini, kita mengikat kotak teks dan dua kotak centang secara bersamaan, sehingga Anda dapat melihat bagaimana ng-model menangani nilai string dan nilai boolean secara berdampingan.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pname"><br>
        Topic :<br>
        <input type="checkbox" ng-model="Topic.Controller">Controller<br>
        <input type="checkbox" ng-model="Topic.Models">Models
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pname = "Guru99";

        $scope.Topic = {
            Controller: true,
            Models: false
        };
    });
</script>
</body>
</html>

Code Penjelasan:

  1. Direktif ng-model melampirkan variabel anggota “pname” ke kontrol input teks, dan propertinya Topic.Controller ke Topic.Models ke dua kontrol kotak centang.
  2. Di dalam controller, “pname” diberi string “Guru99”, dan objek “Topik” diberi dua anggota boolean. Kotak centang yang terikat dengan ng-model selalu membaca dan menulis boolean, itulah sebabnya true membuat kotak tersebut dicentang dan false menjelaskannya dengan jelas.

Keluaran:

Dari keluarannya,

  • Terlihat jelas bahwa nilai yang diberikan kepada pname variabelnya adalah “Guru99. "
  • Karena nilai batas pertama adalah true, kotak centang ditandai untuk kotak centang “Controller”. Demikian pula, karena nilai kedua adalah false, kotak centang tidak ditandai untuk kotak centang “Model”.

3) Pilih elemen dari Dropdown

Direktif ng-model juga dapat diterapkan pada elemen select, sehingga item yang dipilih pengguna disimpan dalam model.

Di sini kita akan memiliki input teks yang berisi nama “Guru99”, dan daftar pilihan dengan dua item daftar, “Controller” dan “Models”.

⚠️ Koreksi: Tangkapan layar di atas menunjukkan daftar asli, yang mengikat elemen select ke hal yang sama persis. Topics Objek yang menyediakan teks opsi. Saat pengguna memilih opsi, AngularJS akan menimpanya. Topics dengan string yang dipilih dan kedua opsi menghilang. Daftar yang dikoreksi di bawah ini menyimpan daftar dalam satu properti dan pilihan dalam properti lain, dan menggunakan ng-options untuk membuat daftar.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pName"><br>
        Topic :<br>
        <!-- Topics holds the list; selectedTopic holds the choice -->
        <select ng-model="selectedTopic" ng-options="t for t in Topics"></select>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pName = "Guru99";

        $scope.Topics = ["Controller", "Models"];
        $scope.selectedTopic = $scope.Topics[0];
    });
</script>
</body>
</html>

Code Penjelasan:

  1. Input teks terikat pada pName, dan elemen select terikat pada selectedTopicKarena elemen select memiliki properti model tersendiri, memilih suatu opsi tidak akan pernah mengubah isi daftar itu sendiri.
  2. The Topics Array tersebut menyimpan dua nilai, yaitu “Controller” dan “Models”. ng-options Ekspresi tersebut menelusuri array dan menampilkan satu opsi per entri, sehingga menambahkan topik ketiga tidak memerlukan perubahan pada markup.
  3. selectedTopic sudah diatur ke entri pertama, yang membuat dropdown terbuka dengan nilai default yang masuk akal, bukan baris kosong.

Keluaran:

Dari outputnya, dapat dilihat bahwa nilai yang diberikan kepada pName variabelnya adalah “Guru99”, dan kontrol pilihan menawarkan opsi “Controller” dan “Models”. Terlepas dari contoh yang berfungsi, binding terkadang menolak untuk diperbarui, dan alasannya perlu diketahui.

Mengapa Binding ng-model Terkadang Gagal?

Sebagian besar masalah ng-model yang dilaporkan bukanlah bug di AngularJS, melainkan konsekuensi dari cara kerja scope dan tipe data primitif.

Kasus klasik adalah pengikatan yang ditempatkan di dalam arahan yang menciptakan cakupan anak, seperti ng-ulangi, ng-if atau ng-switch. Menulis ng-model="name" Hal ini menciptakan salinan bayangan pada cakupan anak, sehingga induk tidak pernah melihat pengeditan. Mengikat ke properti objek sebagai gantinya — ng-model="user.name" — menjaga agar setiap scope mengarah ke referensi yang sama. Inilah alasan mengapa pengembang AngularJS berpengalaman bersikeras menggunakan titik di setiap ekspresi ng-model.

Dua penyebab lainnya mencakup sebagian besar sisanya:

  • Pengontrol atau modul hilang: Jika ng-app atau ng-controller salah eja, binding akan secara diam-diam tidak menampilkan apa pun alih-alih menimbulkan kesalahan.
  • Nilai diubah di luar AngularJS: Nilai yang ditetapkan dari handler jQuery atau callback setTimeout berada di luar siklus digest, sehingga tampilan tidak akan diperbarui hingga $scope.$apply() berjalan

Memeriksa ketiga hal tersebut akan menyelesaikan sebagian besar masalah pada binding yang tampaknya tidak berfungsi.

Pertanyaan Umum Demo Slot

ng-bind bersifat satu arah: ia mencetak nilai model ke dalam sebuah elemen. ng-model bersifat dua arah dan hanya berfungsi pada kontrol formulir, sehingga input pengguna mengalir kembali ke model dan juga keluar darinya.

Tambahkan ng-model-options, misalnya ng-model-options=”{ debounce: 500 }”. AngularJS kemudian menunggu setengah detik setelah penekanan tombol terakhir sebelum memperbarui model, yang berguna untuk kotak pencarian yang memicu permintaan.

Secara garis besar, ya. Asisten AI menulis ulang ng-model sebagai [(ngModel)] dan menambahkan impor FormsModule. Formulir reaktif, parser kustom, dan pipeline $formatters masih memerlukan tinjauan manual, karena Angular memodelkannya dengan cara yang sangat berbeda.

Alat AI memeriksa penyebab umum dengan cepat: batasan primitif di dalam cakupan anak, nama pengontrol yang salah eja, dan nilai yang ditetapkan di luar siklus digest. Masing-masing menghasilkan kegagalan tanpa menampilkan pesan kesalahan di konsol.

Hanya input type="number" yang diuraikan menjadi nilai numerik. Kontrol type="text" selalu menghasilkan string, sehingga perbandingan dengan === akan gagal. Konversikan secara eksplisit, atau ganti tipe input.

Ringkaslah postingan ini dengan: