AngularJS中实现依赖提交按钮：获取JSON文件并展示数据

嘿，很高兴看到你已经搞定了依赖下拉菜单的部分！接下来要实现「选择BMW后点击提交，跳转至含JSON的URL并以表格展示结果」的需求，我给你整理了一套适合新手的AngularJS实现方案，一步步来很容易上手：

1. 先准备BMW对应的JSON数据文件 #

首先咱们得有一个存储BMW相关数据的JSON文件，比如命名为bmw-data.json，示例结构如下：

{
  "cars": [
    {
      "model": "BMW 3 Series",
      "year": 2023,
      "price": "$41,450"
    },
    {
      "model": "BMW 5 Series",
      "year": 2023,
      "price": "$54,200"
    },
    {
      "model": "BMW X5",
      "year": 2023,
      "price": "$61,600"
    }
  ]
}

2. 配置AngularJS路由（实现页面跳转） #

如果你是想跳转到一个专门展示表格的页面，需要用AngularJS的ngRoute模块来配置路由。首先确保你引入了路由脚本，然后在模块中注入ngRoute：

引入依赖脚本 #

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

配置路由 #

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

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html', // 你的首页（包含下拉和提交按钮）
      controller: 'HomeController'
    })
    .when('/bmw-table', {
      templateUrl: 'bmw-table.html', // 展示表格的页面
      controller: 'BmwTableController'
    })
    .otherwise({redirectTo: '/'});
});

3. 首页（HomeController）逻辑：处理提交跳转 #

在首页的控制器中，监听提交按钮的点击事件，判断用户是否选择了BMW，然后跳转到表格页面：

首页模板（home.html） #

<div ng-controller="HomeController">
  <select ng-model="selectedParent" ng-options="p for p in parentOptions">
    <option value="">选择类型</option>
  </select>

  <select ng-model="selectedChild" ng-options="c for c in childOptions[selectedParent]">
    <option value="">选择品牌</option>
  </select>

  <button ng-click="submit()">提交</button>
</div>

首页控制器（HomeController） #

app.controller('HomeController', function($scope, $location) {
  // 你的依赖下拉数据
  $scope.parentOptions = ['Cars', 'Bikes'];
  $scope.childOptions = {
    'Cars': ['BMW', 'Audi'],
    'Bikes': ['Yamaha', 'Honda']
  };

  $scope.submit = function() {
    // 判断是否选择了BMW
    if ($scope.selectedChild === 'BMW') {
      // 跳转到表格页面
      $location.path('/bmw-table');
    } else {
      // 可以添加其他品牌的处理逻辑，或者提示用户
      alert('请选择BMW以查看详情');
    }
  };
});

4. 表格页面（BmwTableController）：加载JSON并展示 #

在表格页面的控制器中，用$http服务请求JSON文件，然后把数据绑定到页面上的表格：

表格页面模板（bmw-table.html） #

<div ng-controller="BmwTableController">
  <h2>BMW车型详情</h2>
  <table border="1" ng-if="bmwData">
    <thead>
      <tr>
        <th>车型</th>
        <th>年份</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="car in bmwData.cars">
        <td>{{car.model}}</td>
        <td>{{car.year}}</td>
        <td>{{car.price}}</td>
      </tr>
    </tbody>
  </table>
  <div ng-if="!bmwData">加载中...</div>
</div>

表格页面控制器（BmwTableController） #

app.controller('BmwTableController', function($scope, $http) {
  // 请求BMW的JSON数据文件
  $http.get('bmw-data.json')
    .then(function(response) {
      $scope.bmwData = response.data;
    })
    .catch(function(error) {
      console.error('加载JSON数据失败:', error);
      alert('加载数据失败，请稍后重试');
    });
});

一些新手注意事项 #

• 确保JSON文件和你的HTML文件在同一目录下，或者$http.get的路径正确，否则会加载失败。
• 如果你不想跳转页面，而是在当前页面展示表格，可以把表格放在首页模板里，提交后直接请求JSON并显示表格，不需要路由配置，这样更简单。
• 记得测试所有流程：选择Cars→BMW→提交，看是否能正确加载表格；选择其他选项时是否有提示。

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