Chỉ thị ng-repeat của AngularJS với ví dụ
James Hartman
Chỉ thị ng-repeat trong AngularJS
ng-lặp lại lệnh trong AngularJS được sử dụng để hiển thị các giá trị lặp lại được xác định trong bộ điều khiển. Đôi khi chúng tôi yêu cầu hiển thị danh sách các mục trong dạng xem. Lệnh ng-repeat giúp chúng ta hiển thị danh sách các mục được xác định trong bộ điều khiển tới một trang xem.
Ví dụ chỉ thị ng-repeat của AngularJS
Hãy xem một ví dụ về lệnh ng-repeat trong 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>
Giải thích mã:
- Trong bộ điều khiển, trước tiên chúng ta xác định mảng danh sách các mục mà chúng ta muốn xác định trong dạng xem. Ở đây chúng ta đã định nghĩa một mảng có tên là “TopicNames” chứa ba mục. Mỗi mục bao gồm một cặp tên-giá trị.
- Sau đó, mảng TopicsNames được thêm vào một biến thành viên có tên là “topics” và được gắn vào đối tượng phạm vi của chúng ta.
- Chúng tôi đang sử dụng các thẻ HTML của (Danh sách không có thứ tự) và (List Item) để hiển thị danh sách các mục có trong mảng của chúng ta. Sau đó, chúng tôi sử dụng chỉ thị ng-repeat để xem qua từng mục trong mảng của chúng tôi. Từ “tpname” là một biến được dùng để trỏ đến từng mục trong mảng topic.TopicNames.
- Trong phần này, chúng tôi sẽ hiển thị giá trị của từng mục mảng.
Nếu mã được thực thi thành công, Đầu ra sau sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt. Bạn sẽ thấy tất cả các mục của mảng (Về cơ bản là TopicNames trong các chủ đề) được hiển thị.
Đầu ra:
Nhiều bộ điều khiển AngularJS
Một ví dụ về bộ điều khiển nâng cao sẽ là khái niệm có nhiều bộ điều khiển trong một ứng dụng JS góc cạnh.
Bạn có thể muốn xác định nhiều bộ điều khiển để phân tách các chức năng logic nghiệp vụ khác nhau. Trước đó chúng tôi đã đề cập đến việc có các phương thức khác nhau trong bộ điều khiển, trong đó một phương thức có chức năng riêng biệt để cộng và trừ các số. Chà, bạn có thể có nhiều bộ điều khiển để có sự phân tách logic nâng cao hơn. Ví dụ: bạn có thể có một bộ điều khiển chỉ thực hiện các thao tác trên số và bộ điều khiển còn lại thực hiện các thao tác trên chuỗi.
Hãy xem một ví dụ về cách chúng ta có thể định nghĩa nhiều bộ điều khiển trong một ứng dụng Angular.JS.
<!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>
Giải thích mã:
- Ở đây chúng ta đang định nghĩa 2 bộ điều khiển có tên là “firstController” và “secondController”. Đối với mỗi bộ điều khiển, chúng tôi cũng đang thêm một số mã để xử lý. Trong firstController, chúng ta đính kèm một biến có tên là “pname” có giá trị “firstController” và trong SecondController, chúng ta đính kèm một biến có tên “lname” có giá trị “secondController”.
- Trong khung nhìn, chúng ta đang truy cập cả hai bộ điều khiển và sử dụng biến thành viên từ bộ điều khiển thứ hai.
Nếu mã được thực thi thành công, Đầu ra sau sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt. Bạn sẽ thấy tất cả văn bản của “secondController” như mong đợi.
Đầu ra:
Tổng kết
- Lệnh ng-repeat trong AngularJS được sử dụng để hiển thị nhiều mục lặp lại.
- Chúng tôi cũng đã xem xét một bộ điều khiển nâng cao để xem xét định nghĩa của nhiều bộ điều khiển trong một ứng dụng.
