AngularJS 1列表页面已实现，请教如何创建并跳转至编辑页面

Hey there! Great job getting your user list up and running. Let's walk through how to add the edit page and get that navigation working smoothly in AngularJS 1. Here's a step-by-step breakdown:

Step 1: Set Up Routing with ngRoute #

First, we need to configure Angular's routing to handle the jump to the edit page. AngularJS 1 uses the ngRoute module (built-in, but needs to be explicitly included):

• Add the ngRoute script to your HTML (if you haven't already):

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

• Update your app module to depend on ngRoute:

  var app = angular.module('yourAppName', ['ngRoute']);
  

• Define your routes using $routeProvider:

  app.config(function($routeProvider) {
    $routeProvider
      // Your existing user list route
      .when('/users', {
        templateUrl: 'user-list.html', // Path to your current list template
        controller: 'UserListController'
      })
      // New edit user route (the :userId is a dynamic parameter)
      .when('/user/:userId', {
        templateUrl: 'user-edit.html', // We'll create this template next
        controller: 'UserEditController'
      })
      // Fallback route if no match is found
      .otherwise({ redirectTo: '/users' });
  });
  

Step 2: Create the Edit Page Template (user-edit.html) #

This template will hold a form for editing user details, bound to the user data from our controller:

<div class="container">
  <h2>Edit User</h2>
  <form>
    <div class="form-group">
      <label>Name:</label>
      <input type="text" class="form-control" ng-model="editingUser.name">
    </div>
    <div class="form-group">
      <label>Email:</label>
      <input type="email" class="form-control" ng-model="editingUser.email">
    </div>
    <button type="button" class="btn btn-primary" ng-click="saveUser()">Save Changes</button>
    <a href="#/users" class="btn btn-secondary">Cancel</a>
  </form>
</div>

Step 3: Build the Edit Controller (UserEditController) #

This controller will fetch the specific user using the ID from the URL, and handle saving changes:

app.controller('UserEditController', function($scope, $routeParams, $location) {
  // Replace this with your actual data source (e.g., a service that fetches from an API)
  // For this example, we'll assume your user data is available in the parent scope
  var allUsers = $scope.$parent.data;
  
  // Find the user matching the ID from the route parameter
  $scope.editingUser = allUsers.find(user => user.id == $routeParams.userId);
  
  // Function to save updates and redirect back to the list
  $scope.saveUser = function() {
    // If using an API, send a PUT request here to update the user on the server
    // For local data, changes are already reflected in the array (since it's a reference)
    
    // Navigate back to the user list
    $location.path('/users');
  };
});

Quick Fix: Typo in Your List Template #

I noticed a small typo in your original code—{{user.emaik}} should be {{user.email}} to display the email correctly!

Verify Your Existing Link #

Your current link <a href="#/user/{{user.id}}">{{user.name}}</a> is already set up perfectly to trigger the edit route. Once routing is configured, clicking this link will take users straight to the edit page for that specific user.

Pro tip: For better code organization, consider moving your user data logic into a service instead of relying on the parent scope—this makes it easier to share data between controllers and handle API calls.

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