Question

继承我的代码，我尝试通过id在我的产品页面中显示我选择的产品。例如，当我点击某个产品时，它会转到右侧网址/#/product/2，并显示产品ID的所有属性：2。请看一下这段代码

app.js

angular
 .module('app', [
  'ui.router',
  'app.directives.productCard'
 ])
 .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
   .state('home', {
    url: '/',
    templateUrl: 'templates/pages/home.html',
    controller: 'homeCtrl'
   })
   .state('product', {
    url: '/product',
    templateUrl: 'templates/pages/product.html',
    controller: 'productCtrl'
   })
   .state('productDetails', {
    url: '/product/:id',
    templateUrl: 'templates/pages/productDetails.html',
    controller: 'productDetailsCtrl'
   })
 }])

我的服务

angular
     .module('app')
     .factory('Product', ['$http', function($http) {
      return {
       get: function() {
        return $http.get('https://raw.githubusercontent.com/vicariosinaga/learn/master/products.json').then(function(response) {
         return response.data;
        });
       }
      };
     }])

productCtrl

angular
    .module('app')
    .controller('productCtrl',['$scope', 'Product', function($scope,Product) {
        $scope.title="List Product";
        Product.get().then(function(data) {
            $scope.products = data;
        });
        $scope.products=Product.get();
    }]);

productdetailsCtrl

angular
    .module('app')
    .controller('productDetailsCtrl',['$scope','$stateParams', 'Product', function($scope,$stateParams,Product){
        $scope.id=$stateParams.id;
        Product.get().then(function(data) {
            var singleProduct = data.filter(function(entry){
                return entry.id === $scope.id;
            })[0];
            console.log(singleProduct);
            console.log($stateParams);
        });
}]);

product.html

<div class="col-lg-3 col-md-4 col-sm-6">
    <div class="card">
      <img class="card-img-top"  ng-src="{{item.image}}" alt="{{item.name}}">
      <div class="card-block">
        <strong class="card-title">{{item.name}}</strong>

      </div>
      <div class="card-block">
        <a href="#/product/{{item.id}}" class="card-link">Buy</a>
      </div>
    </div>
</div>

product detail.html

<p>{{id}}</p>   
<p>{{name}}</p>
<p>{{image}}</p>

在所有这些代码之后，当我尝试通过控制台检查时。我得到Object {id: "2"}，但是当我尝试显示产品2中的所有属性时，我得到了控制台未定义。为什么我得到undifined。是的我没有使用和本地服务器。但如果它的问题。是否所有代码都适合打印产品2的所有属性

这里是json https://raw.githubusercontent.com/vicariosinaga/learn/master/products.json

的链接

Answer 1

更改产品详细信息状态url，使id参数成为int，这样您就可以通过return entry.id === $scope.id;（严格相等检查）。这里有{{1}将值设为id为singleProduct的字符串。

undefined

否则您必须将严格检查更改为.state('productDetails', { url: '/product/{id:int}', templateUrl: 'templates/pages/productDetails.html', controller: 'productDetailsCtrl' })

尝试在json上获取数据并将其放在每个数据的单个页面上时状态未定义

1 个答案: