Petunjuk ng-repeat AngularJS dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

Petunjuk ng-repeat di AngularJS

ng-ulangi arahan di AngularJS digunakan untuk menampilkan nilai berulang yang ditentukan dalam pengontrol. Terkadang kita perlu menampilkan daftar item dalam tampilan. Direktif ng-repeat membantu kita menampilkan daftar item yang ditentukan di pengontrol ke halaman tampilan.

Contoh Petunjuk AngularJS ng-repeat

Mari kita lihat contoh direktif ng-repeat di AngularJS:

Petunjuk ng-repeat di AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
		{{tpname.name}}
		</li></ul>
</div>

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

	$scope.TopicNames =[
		{name: "What controller do from Angular's perspective"},
		{name: "Controller Methods"},
		{name: "Building a basic controller"}];	
		});
</script>

</body>
</html>

Penjelasan Kode:

  1. Di pengontrol, pertama-tama kita mendefinisikan array item daftar yang ingin kita definisikan dalam tampilan. Di sini kita telah mendefinisikan sebuah array bernama “TopicNames” yang berisi tiga item. Setiap item terdiri dari pasangan nama-nilai.
  2. Array TopicsNames kemudian ditambahkan ke variabel anggota yang disebut "topik" dan dilampirkan ke objek cakupan kita.
  3. Kami menggunakan tag HTML (Daftar Tidak Berurutan) dan (Daftar Item) untuk menampilkan daftar item dalam array kita. Kami kemudian menggunakan direktif ng-repeat untuk menelusuri setiap item dalam array kami. Kata “tpname” adalah variabel yang digunakan untuk menunjuk ke setiap item dalam array topik.TopicNames.
  4. Dalam hal ini, kami akan menampilkan nilai setiap item array.

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser. Anda akan melihat semua item dari array (Pada dasarnya TopicNames dalam topik) ditampilkan.

Keluaran:

Petunjuk ng-repeat di AngularJS

Pengontrol Berganda AngularJS

Contoh pengontrol tingkat lanjut adalah konsep memiliki banyak pengontrol dalam aplikasi JS sudut.

Anda mungkin ingin menentukan beberapa pengontrol untuk memisahkan fungsi logika bisnis yang berbeda. Sebelumnya kami telah menyebutkan tentang memiliki metode berbeda dalam pengontrol di mana satu metode memiliki fungsi terpisah untuk penjumlahan dan pengurangan angka. Nah, Anda dapat memiliki banyak pengontrol untuk mendapatkan pemisahan logika yang lebih maju. Misalnya, Anda dapat memiliki satu pengontrol yang hanya melakukan operasi pada angka dan pengontrol lainnya melakukan operasi pada string.

Mari kita lihat contoh bagaimana kita dapat mendefinisikan beberapa pengontrol dalam aplikasi Angular.JS.

Pengontrol Berganda AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp">
	<div ng-controller="firstcontroller">
		<div ng-controller="secondcontroller">
		{{lname}}
		</div>
	</div>
</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('firstcontroller', function($scope){
		$scope.pname="firstcontroller";
			});
		app.controller('secondcontroller', function($scope){
			$scope.lname="secondcontroller";
			});
</script>
</body>
</html>

Penjelasan Kode:

  1. Di sini kita mendefinisikan 2 pengontrol yang disebut “firstController” dan “secondController”. Untuk setiap pengontrol kami juga menambahkan beberapa kode untuk diproses. Di firstController kami, kami melampirkan variabel bernama "pname" yang memiliki nilai "firstController", dan di secondController kami melampirkan variabel bernama "lname" yang memiliki nilai "secondController".
  2. Dalam tampilan, kita mengakses kedua pengontrol dan menggunakan variabel anggota dari pengontrol kedua.

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser. Anda akan melihat semua teks “secondController” seperti yang diharapkan.

Keluaran:

Pengontrol Berganda AngularJS

Kesimpulan

  • Perintah ng-repeat di AngularJS digunakan untuk menampilkan beberapa item berulang.
  • Kami juga melihat pengontrol tingkat lanjut yang melihat definisi beberapa pengontrol dalam suatu aplikasi.

Anda mungkin ingin: