By GokiSoft.com| 19:37 30/09/2022|
AngularJS

Bài tập - Hiển thị mảng sinh viên ra table - Lập trình AngularJS

- Tạo ngẫu nhiên 20 sinh viên

- Mỗi sinh viên gồm các thuộc tính sau (tên, tuổi, địa chỉa, email, sđt)

- Hiển thị kết quả ra 1 table như sau


Tags:

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Cao Thái Tuân [community,C2108L]
Cao Thái Tuân

2021-12-17 13:17:36



<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  	<!-- B1. Them thu vien cua AngularJS -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <style>
        .container{
            border: solid 1px blue;
        }
        .panel-heading{
            background-color: cornflowerblue; 
        }
        .panel-heading h2{
            color: white;
        }

    </style>
</head>
<body ng-controller="Mycontroller" >
      <div class="container">
        <div class="panel-heading">
            <h2>Managenment Student</h2>
        </div>

        <input type="text" class="form-control" id="address" placeholder="Input Name" ng-model="user.fullname">
        <input type="number" class="form-control" id="address" placeholder="Input Age" ng-model="user.age">
        <input type="email" class="form-control" id="address" placeholder="Input Email" ng-model="user.email">
        <input type="text" class="form-control" id="address" placeholder="Input Address" ng-model="user.address">

        <div class="panel-body">
            <table class=" table table-bordered">
                <tr>
                    <th>STT</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Email</th>
                    <th>Address</th>
                </tr>

                <tr ng-repeat="item in Stdlist">
                    <td>{{$index +1}}</td>
                    <td>{{item.Name}}</td>
                    <td>{{item.Age}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.add}}</td>
                </tr>
            </table>
        </div>
        <button class="btn btn-success" ng-click="Addstudent()">Add</button>
      </div>  
 
  <script src="">
      var app = angular.module('myApp', []);
      app.controller('Mycontroller', function($scope){
          $scope.Stdlist =[]
          $scope.Addstudent = function(){
             var myStudent = {
                 "Name": $scope.user.fullname,
                 "Age": $scope.user.age,
                 "email": $scope.user.email,
                 "add" : $scope.user.address
             } 
             $scope.Stdlist.push(myStudent)
          }
     
      });
  </script>
</body>
</html>