Question

我的项目中有很多JSON模型，我需要根据用户的操作显示不同的模型。

这是Angular路由器代码：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      }).when('/doc/:section, {
        templateUrl: 'views/doc.html',
        controller: 'DocCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

这是DocCtrl.js文件：

app.controller('DocCtrl', ['$scope', '$http', 'JSONModelsService',
    function ($scope, $http, JSONModelsService) {

        var formData = {};

        $scope.group = {};
        $scope.sections = [];

        JSONModelsService.get([section])
            .then(function (response) {
                console.log(response);
                $scope.group = response.data.groups[0];

                $scope.sections = $scope.group.sections;
            });

    }]);

我基本上需要使section动态，所以我可以在我的视图中显示不同的模型。但是，我很困惑，我怎么能这样做。我只有一个名为JSONModels的文件夹，里面有多个json文件。

Answer 1

如果我正确理解您的问题，您的目标是用实际的部分标识符替换代码的[section]部分？

当用户访问您的/doc/:section路由时，例如/doc/my-doc您可以通过将:section服务注入您的控制器来访问$routeParams部分。

app.controller('DocCtrl', ['$scope', '$http', '$routeParams', 'JSONModelsService',
    function ($scope, $http, $routeParams, JSONModelsService) {
  ...

使用$routeParams服务，您可以访问路线参数。因此，您可以通过:section读取$routeParams.section参数来简单地访问app.controller('DocCtrl', ['$scope', '$http', '$routeParams', 'JSONModelsService', function ($scope, $http, $routeParams, JSONModelsService) { var formData = {}; $scope.group = {}; $scope.sections = []; JSONModelsService.get([$routeParams.section]) .then(function (response) { console.log(response); $scope.group = response.data.groups[0]; $scope.sections = $scope.group.sections; }); }]);参数。

一个完整的例子（我认为你正在努力实现的目标）：

ob_start();

如果您想了解更多信息，请查看角度教程的第7步：https://docs.angularjs.org/tutorial/step_07

使用AngularJS

1 个答案: