基于Angular JS实现JSON用户列表的列格式展示需求

Hey there! Let's walk through building that column-based user list you want using AngularJS. I'll cover everything from setting up the app to rendering the data, plus a few tweaks to make it look polished.

First, let's assume your user JSON looks something like this (adjust to match your actual data structure):

const sampleUsers = [
  { id: 1, fullName: "John Doe", email: "john.doe@example.com", userRole: "Admin" },
  { id: 2, fullName: "Jane Smith", email: "jane.smith@example.com", userRole: "Content Editor" },
  { id: 3, fullName: "Bob Miller", email: "bob.miller@example.com", userRole: "Viewer" }
];

Step 1: Set Up Your AngularJS Module & Controller #

First, include AngularJS in your project, then define your app module and controller. We'll attach the JSON data to the controller's scope so we can access it in the template:

<!-- Load AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<script>
  // Define your app module
  angular.module('UserListApp', [])
  // Create a controller to handle user data
  .controller('UserListController', function($scope, $http) {
    // Option 1: Use hardcoded JSON (for testing)
    $scope.users = [
      { id: 1, fullName: "John Doe", email: "john.doe@example.com", userRole: "Admin" },
      { id: 2, fullName: "Jane Smith", email: "jane.smith@example.com", userRole: "Content Editor" },
      { id: 3, fullName: "Bob Miller", email: "bob.miller@example.com", userRole: "Viewer" }
    ];

    // Option 2: Fetch JSON from an API (uncomment to use)
    /*
    $http.get('/your-api-endpoint/users')
      .then(function(response) {
        $scope.users = response.data;
      })
      .catch(function(err) {
        console.error('Failed to load users:', err);
      });
    */
  });
</script>

Step 2: Build the Column-Based Template with ng-repeat #

We'll use an HTML table for clean column layout—AngularJS's ng-repeat directive will loop through each user and render a table row for them. This is perfect for columnar data:

<!-- Root element for your AngularJS app -->
<div ng-app="UserListApp" ng-controller="UserListController">
  <table class="user-table">
    <!-- Table header (columns) -->
    <thead>
      <tr>
        <th>ID</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <!-- Table body: render each user with ng-repeat -->
    <tbody>
      <tr ng-repeat="user in users">
        <td>{{ user.id }}</td>
        <td>{{ user.fullName }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.userRole }}</td>
      </tr>
    </tbody>
  </table>
</div>

Step 3: Add CSS to Match Your Desired Style #

To make the table look clean and professional (like your example image), add this CSS:

.user-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arial', sans-serif;
  margin: 20px 0;
}

.user-table th {
  background-color: #f0f0f0;
  text-align: left;
  padding: 12px;
  border-bottom: 2px solid #ddd;
}

.user-table td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

.user-table tbody tr:hover {
  background-color: #f8f8f8;
}

.user-table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

Key AngularJS Concepts to Note #

• ng-app: Marks the root of your AngularJS application—this is where the framework takes over.
• ng-controller: Binds your controller to the DOM, making the controller's scope (and your user data) accessible in the template.
• ng-repeat: Iterates over your users array, creating a new <tr> element for each user.
• {{ }}: AngularJS interpolation syntax—this pulls data from the scope and renders it in the DOM.

If your JSON has different field names, just swap out the values inside the {{ }} (e.g., if your name field is username instead of fullName, use {{ user.username }}).

That's it! This setup will render your JSON user data in a clean, column-based list exactly like you're aiming for.

内容的提问来源于stack exchange，提问作者deadpool