Mảng hiển thị góc trong html

Sau đây là hướng dẫn đơn giản về cách thiết lập ứng dụng AngularJS để hiển thị mảng thông tin người dùng bằng javascript

Trước hết, chúng ta sẽ bắt đầu bằng cách tạo mảng javascript của mình. Sau đây là một mảng thông tin người dùng chứa các chi tiết về Tên, Giới tính và Vị trí

var userData = [
    {
        Name: "John Smith",
        Gender: "M",
        Location: "Wales"
    },
    {
        Name: "Sally Smith",
        Gender: "F",
        Location: "USA"
    },
    {
        Name: "Curtis Timson",
        Gender: "M",
        Location: "England"
    },
    {
        Name: "Sam Wallace",
        Gender: "M",
        Location: "England"
    },
    {
        Name: "Caroline James",
        Gender: "F",
        Location: "Scotland"
    }
];

Tiếp theo, chúng tôi sẽ thiết lập bộ chứa ứng dụng HTML cần thiết

<div ng-app="myApp">div>

Sau đó, chúng tôi có thể khởi tạo ứng dụng này dưới dạng ứng dụng Angular bằng cách gọi

<div ng-app="myApp">div>

2. Điều này sẽ trở thành phạm vi ứng dụng của chúng tôi. Do đó,

<div ng-app="myApp">div>

3 của chúng tôi sẽ không thể tác động đến HTML bên ngoài vùng chứa này

var myApp = angular.module("myApp", []);

Bây giờ ứng dụng đã có một biến,

<div ng-app="myApp">div>

3, chúng ta có thể thêm một bộ điều khiển vào nó và tạo một biến mới chứa dữ liệu người dùng

myApp.controller("myController", function($scope){
    $scope.users = userData;
});

Do đó,

<div ng-app="myApp">div>

5 hiện tham chiếu mảng dữ liệu người dùng ban đầu của chúng tôi

Quay trở lại HTML của chúng ta, bây giờ chúng ta có thể sao lưu tham chiếu đến bộ điều khiển

<div ng-app="myApp" ng-controller="myController">div>

Trong phần tử

<div ng-app="myApp">div>

0 này, giờ đây chúng ta có thể truy cập biến

<div ng-app="myApp">div>

1. Do đó, chúng tôi có thể tạo một phần tử danh sách không có thứ tự và bằng cách sử dụng

<div ng-app="myApp">div>

2, tạo một vòng lặp các mục danh sách. AngularJS sử dụng

<div ng-app="myApp">div>

3 để có thể truy cập các thuộc tính của đối tượng hiện tại trong vòng lặp

<div ng-app="myApp" ng-controller="myController">
    <ul>
        <li ng-repeat="user in users">{{user.Name}} | {{user.Location}}li>
    ul>
div>

Ở đây chúng tôi đang lặp qua tất cả

<div ng-app="myApp">div>

4 để hiển thị nhiều phần tử

<div ng-app="myApp">div>

5 và hiển thị Tên và Vị trí của từng người dùng

Và đó là nó

Dưới đây là một ví dụ hoạt động của hướng dẫn trên mà tôi đã tổng hợp trên jsFiddle. Vui lòng chỉnh sửa nó và chơi xung quanh

Làm cách nào để in mảng trong html góc cạnh?

Làm cách nào để in mảng trong Angular 8?

Làm cách nào để truy cập các phần tử mảng trong Angular?

Làm cách nào để in một mảng trong chuỗi được phân tách bằng dấu phẩy trong html góc?