angular对数据过滤之后进行渲染

自拟的json,渲染到页面上,单击那个商品页面然后就跳到那个商品的页面,我用$state.go()传参获取了商品的id,然后跳转的页面再接收这个id,怎么根据ID来进行数据的渲染,我的思路是,对传过来的id进行过滤.然后渲染.具体看代码.

angular.module('app').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('index', {  //路由ID
            url: '/index',   //路由hash
            templateUrl: 'view/index.html',  //路由模板
            controller: 'indexCtrl'
         })
        .state('juja',{
            url:'/juja',
            templateUrl:'view/list.html',
            controller:'listCtrl'
        })
            .state('details',{
            url:'/details',
            templateUrl:'view/DetailsPage.html',
            params:{"test":null},
        })
        .state('shopping',{
            url:'/shopping',
            templateUrl:'view/Shopping.html',
        })
    $urlRouterProvider.otherwise('index');
}]);

我在路由的的 params 里传了一个参数test,然后在目标页面接受.

angular.module('app').controller('listCtrl', ['$scope', '$http', 'getdata','$state', function ($scope, $http,getdata,$state) {
    $scope.obj =null;
    getdata.fun().then(function(response){//这是获取json方法
        // console.log(response.data)
        $scope.da = response.data.pillow;
    })
    $scope.aff = function(index){ //此处的事件是单击每个商品  获取它的id,通过$state.go来获取id
        $state.go("details",{"test":$scope.da[index].id})
    }
}]);

目标页面的控制器里通过$stateParams接收,我接收到了id,我想对这个id进行过滤,对不同的id进行页面的渲染,然后就遇到问题:

  我忘记说了 控制器bd的是商品详情页的  然后listCtrl是商品列表页的

获取到了id,,通过angular里的filter进行过滤,但是过滤是过滤整个json文件里面的id?还是只过滤接收过来的ID渲染的时候进行,或者大家给个建议,我不会了.
我想达到的效果就是通过不同的id进行不同的id的渲染. 通俗的就是我点手机这个商品,跳到的就是手机的商品详情页.

angular.module('app').controller('bd', ['$scope', 'getdata' ,'$http','$state',  function ($scope,getdata ,$http,$stateParams) {
    //console.log($stateParams.params.test)
    $scope.dat = null;
    $scope.dat = $stateParams.params.test;
    console.log($scope.dat)
    getdata.fun().then(function(response){
        $scope.da = response.data.pillow;
    });
    console.log($scope.da)
    // console.log($filter)
    // $filter($scope.dat)(console.log('123124'))
    filter('myfilter',function () {
        return function () {

        }
    })

}]);
阅读 2.4k
2 个回答
getdata.fun().then(function(response){
    $scope.details = response.data.pillow.filter(function(item){
        return item.id === $stateParams.params.test
    });
});

可以根据取到的id从整个数据中(整个json)过滤数据,id应该是一个动态的路由变量,但是我并没有看到你写有对应的路由。
这是我们项目里的一个写法,你可以参考下:
图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题