Json AngularJS-多状态参数

我们仍在学习，但似乎无法解决这个问题，我们希望能够选择产品类型，并使用formData值productType:1 image1显示与此ID image2相关的正确JSON产品数据

下面是我们在app.js中的控制器，我们已经尝试使用多个$stateParems，但似乎无法使用stateParems获得producttype id

每个productType ID都与它自己的JSONstub相关，这是我们当前正在使用的，但它只获取jobID，而不获取下面的productType ID

下面是我们的示例，要查找产品类型部分，请单击“登录”>“CHD24-26384108”“查看”>“下一步”

如果有人能给我们提供建议，并为我们指明正确的方向，这将大有帮助。同样，我们是新手。如果你发现我们做得不好，请指出

多谢各位

// Product Type
.controller('warrantyCtrl', function($scope, $http, $stateParams) {
  $scope.params = $stateParams.jobID[0];
  $scope.dataLoaded = false;
  $http({
    url: 'http://jsonstub.com/warranty/' + $scope.params,
    method: 'GET',
    dataType: 'json',
    data: '',
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': 'http://run.plnkr.co',
      'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
      'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
    }
  }).success(function(data, status, headers, config) {
    $scope.warrantydata = data;
    $scope.dataLoaded = true;
  }).error(function(data, status, error, config) {
    $scope.warrantydata = [{
      heading: "Error",
      description: "Could not load json data"
    }];
    $scope.dataLoaded = false;
  });
  $scope.formData = {
    'jobID': $scope.params
  };

  // Product Type Select
  $scope.products = [{
    id: '1',
    name: 'Petrol Lawnmower'
  }, {
    id: '2',
    name: 'Electric Lawnmower'
  }, {
    id: '3',
    name: 'Petrol Chainsaw'
  }, {
    id: '4',
    name: 'Electric Chainsaw'
  }, {
    id: '5',
    name: 'Petrol Timmer'
  }, {
    id: '6',
    name: 'Electric Timmer'
  }, {
    id: '7',
    name: 'Etc'
  }];
})


// Product Data
.controller('warrantyFormProductType', function($scope, $http, $stateParams) {
  $scope.productid = $stateParams.jobID[0];
  $http({
    url: 'http://jsonstub.com/producttype/' + $scope.productid, // This needs to be productType id
    method: 'GET',
    dataType: 'json',
    data: '',
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': 'http://run.plnkr.co',
      'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
      'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
    }
  }).success(function(data, status, headers, config) {
    $scope.productdata = data;
  }).error(function(data, status, error, config) {
    $scope.productdata = [{
      heading: "Error",
      description: "Could not load json data"
    }];
  })

  // Add / Remove Columns (Still working on)
  $scope.removeRow = function(index) {
    $scope.productdata.splice(index, 1);
    if ($scope.productdata.length() === 0) {
      $scope.productdata = [];
    }
  };
  $scope.addRow = function() {
    var newrow = [];
    if ($scope.productdata.length === 0) {
      newrow = [{
        'en': ''
      }];
    } else {
      $scope.productdata[0].forEach(function(row) {
        newrow.push({
          'en': ''
        });
      });
    }
    $scope.productdata.push(newrow);
  };
});

---

您的API请求应该是这样的吗http://jsonstub.com/2/1 ?

假设是，我已经更新了代码

但是我得到了这个请求的错误400。

---

如果这是您需要的，请查看并发表评论。

在代码$scope.productid=$stateParams.jobID[0]；，$stateParams.jobID的内容是什么？它为什么是数组？您最初定义了多少个参数？您必须已经在默认参数下定义了您的状态，您能提供该代码段吗？类似这样的东西：$stateProvider.state'your.state'，{url:'/product_type/：product_id'，？我们在州内使用url:'^/warranty/form/producttype/：jobID'，但当使用多个类似url:'^/warranty/form/：jobID/producttype/：productID'时，它停止工作。如果它更容易，我确实有一个plnkr设置-

// Product Type
.controller('warrantyCtrl', function($scope, $http, $stateParams) {
  $scope.params = $stateParams.jobID[0];
  $scope.dataLoaded = false;
  $http({
    url: 'http://jsonstub.com/warranty/' + $scope.params,
    method: 'GET',
    dataType: 'json',
    data: '',
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': 'http://run.plnkr.co',
      'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
      'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
    }
  }).success(function(data, status, headers, config) {
    $scope.warrantydata = data;
    $scope.dataLoaded = true;
  }).error(function(data, status, error, config) {
    $scope.warrantydata = [{
      heading: "Error",
      description: "Could not load json data"
    }];
    $scope.dataLoaded = false;
  });
  $scope.formData = {
    'jobID': $scope.params
  };

  // Product Type Select
  $scope.products = [{
    id: '1',
    name: 'Petrol Lawnmower'
  }, {
    id: '2',
    name: 'Electric Lawnmower'
  }, {
    id: '3',
    name: 'Petrol Chainsaw'
  }, {
    id: '4',
    name: 'Electric Chainsaw'
  }, {
    id: '5',
    name: 'Petrol Timmer'
  }, {
    id: '6',
    name: 'Electric Timmer'
  }, {
    id: '7',
    name: 'Etc'
  }];
})


// Product Data
.controller('warrantyFormProductType', function($scope, $http, $stateParams) {
  $scope.productid = $stateParams.jobID[0];
  $http({
    url: 'http://jsonstub.com/producttype/' + $scope.productid, // This needs to be productType id
    method: 'GET',
    dataType: 'json',
    data: '',
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': 'http://run.plnkr.co',
      'JsonStub-User-Key': '1357f082-ea56-46f0-adc5-3e5c273f6f87',
      'JsonStub-Project-Key': 'e4f971a2-db30-45a0-80f9-bfa41b922c64'
    }
  }).success(function(data, status, headers, config) {
    $scope.productdata = data;
  }).error(function(data, status, error, config) {
    $scope.productdata = [{
      heading: "Error",
      description: "Could not load json data"
    }];
  })

  // Add / Remove Columns (Still working on)
  $scope.removeRow = function(index) {
    $scope.productdata.splice(index, 1);
    if ($scope.productdata.length() === 0) {
      $scope.productdata = [];
    }
  };
  $scope.addRow = function() {
    var newrow = [];
    if ($scope.productdata.length === 0) {
      newrow = [{
        'en': ''
      }];
    } else {
      $scope.productdata[0].forEach(function(row) {
        newrow.push({
          'en': ''
        });
      });
    }
    $scope.productdata.push(newrow);
  };
});