移动端元素水平空间均分及AngularJS动态生成路由间数量可变按钮列表

Let's tackle your two requirements one by one, with a complete, working AngularJS implementation:

1. Dynamic Button List with Route-Dependent Counts #

To show different button quantities across routes, we'll use AngularJS's ngRoute module to detect the active route and adjust our button list accordingly.

First, update your module to include the routing dependency:

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

Next, configure your routes and modify the controller to update the button list based on the current route:

app.config(function($routeProvider) {
  $routeProvider
    .when("/home", {
      template: "<button-list></button-list>"
    })
    .when("/details", {
      template: "<button-list></button-list>"
    })
    .otherwise({
      redirectTo: "/home"
    });
});

app.controller("keysController", function($route) {
  var $ctrl = this;
  
  // Update button list when route changes
  function syncKeysWithRoute() {
    switch($route.current.originalPath) {
      case "/home":
        $ctrl.keys = ["id", "destination", "body"]; // 3 buttons for home
        break;
      case "/details":
        $ctrl.keys = ["state", "createdDate", "processedDate", "actions"]; // 4 buttons for details
        break;
      default:
        $ctrl.keys = ["id", "destination", "body", "state"]; // Fallback set
    }
  }
  
  // Initialize on load + listen for route changes
  syncKeysWithRoute();
  $route.onChange(syncKeysWithRoute);
});

2. Even Horizontal Spacing on Mobile #

Using Bootstrap 4's flexbox utilities, we can ensure buttons take equal horizontal space on mobile (and all screen sizes). Here's the template setup:

<div ng-app="myApp">
  <!-- Route Navigation -->
  <nav class="mb-3 p-3 bg-light">
    <a href="#!/home" class="btn btn-link">Home</a>
    <a href="#!/details" class="btn btn-link">Details</a>
  </nav>
  
  <!-- Button List -->
  <div ng-controller="keysController as $ctrl" class="container">
    <div class="d-flex flex-wrap justify-content-around">
      <button 
        ng-repeat="key in $ctrl.keys" 
        class="btn btn-primary flex-fill mx-1 my-1"
      >
        {{key | uppercase}}
      </button>
    </div>
  </div>
</div>

Key Classes for Spacing: #

• d-flex: Turns the container into a flexbox parent
• flex-wrap: Lets buttons wrap to new lines on smaller screens if needed
• flex-fill: Forces each button to expand equally to fill available space
• mx-1/my-1: Adds small margins to prevent buttons from touching each other

Full Working Code #

Here's the complete code including all dependencies:

<!DOCTYPE html>
<html>
<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div ng-app="myApp">
    <nav class="mb-3 p-3 bg-light">
      <a href="#!/home" class="btn btn-link">Home</a>
      <a href="#!/details" class="btn btn-link">Details</a>
    </nav>
    
    <div ng-controller="keysController as $ctrl" class="container">
      <div class="d-flex flex-wrap justify-content-around">
        <button 
          ng-repeat="key in $ctrl.keys" 
          class="btn btn-primary flex-fill mx-1 my-1"
        >
          {{key | uppercase}}
        </button>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
  <script>
    var app = angular.module("myApp", ["ngRoute"]);
    
    app.config(function($routeProvider) {
      $routeProvider
        .when("/home", {
          template: ""
        })
        .when("/details", {
          template: ""
        })
        .otherwise({
          redirectTo: "/home"
        });
    });

    app.controller("keysController", function($route) {
      var $ctrl = this;
      
      function syncKeysWithRoute() {
        switch($route.current.originalPath) {
          case "/home":
            $ctrl.keys = ["id", "destination", "body"];
            break;
          case "/details":
            $ctrl.keys = ["state", "createdDate", "processedDate", "actions"];
            break;
          default:
            $ctrl.keys = ["id", "destination", "body", "state"];
        }
      }
      
      syncKeysWithRoute();
      $route.onChange(syncKeysWithRoute);
    });
  </script>
</body>
</html>

This implementation will:

• Automatically switch button sets when navigating between /home and /details routes
• Keep buttons evenly spaced horizontally on mobile devices (and all screen sizes)
• Handle button wrapping on extra-small screens if text is too long

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