Question

我正在尝试make $ routeParams并非未定义，我不知道我做了什么但是ngRepeat：dupes错误已经出现。我弄错了什么？我想要做：

我有这个网址：http://someadress.pl/tests/py/#/admin/article/create/part1/11_000402_A0

我希望params（11_000402_A0）传递给API，但是Angular不会读取表单url并且param仍未定义。我的代码如下：

带路由的app.js：

'use strict';

var appPokayoke = angular.module('appPokayoke', ['ngRoute', 'pokayokaCtr', 'pokayokaSiteCtr', 'navigationCtr']);

appPokayoke.config(function($routeProvider) 
{
     // ----------------------------------------
    // Darwings
    // ----------------------------------------
    $routeProvider
        .when('/admin/drawings', {
            templateUrl : 'views/admin/drawings.html',
            controller  : 'drawings'
        })
        .when('/admin/show/drawing/:name', {
            templateUrl : 'views/admin/drawing.html',
            controller  : 'drawingShow'
        })
        .when('/admin/drawing/create', {
            templateUrl : 'views/admin/drawing-create.html',
            controller  : 'drawingCreate'
        })

    // ----------------------------------------
    // Pokayokes 
    // ----------------------------------------
    $routeProvider
        .when('/admin/pokayokes/:name/:number', {
            templateUrl : 'views/admin/pokayokes.html',
            controller  : 'pokayokes'
        })



    // ----------------------------------------
    // Article
    // ----------------------------------------

        .when('/admin/articles', {
            templateUrl : 'views/admin/articles.html',
            controller  : 'articles'
        })
        .when('/admin/article/:id', {
            templateUrl : 'views/admin/article.html',
            controller  : 'article'
        })
        .when('/admin/article/create/part1/:drawingName', {
            templateUrl : 'views/admin/article-create-part1.html',
            controller  : 'articleCreatePart1'
        })
        .when('/admin/article/create/part2/:drawingName/:articleName', {
            templateUrl : 'views/admin/article-create-part2.html',
            controller  : 'articleCreatePart2'
        })

});

和controller.js：

'use strict';

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



// -------------------------------------------
//                  DRAWINGS
// -------------------------------------------

pokayokaCtr.controller( 'drawings' , [ '$scope' , '$http', function( $scope, $http ){


    $http.get( 'api/admin/drawings/get' ).
    success( function( data ){
        $scope.drawings = data;
    }).error( function(){
        console.log( 'Błąd pobrania pliku z bazy danych! Drawings' );
    });

}]);

pokayokaCtr.controller( 'drawingCreate' , [ '$scope' , '$http' , '$timeout', function( $scope , $http, $timeout){

    $scope.createDrawing = function ( drawing ) {


        $http.post('api/admin/drawings/create', {
            drawing : drawing
        }).success(function(){

            $timeout(function(){
                $scope.success = false;

                $scope.drawing = {};
            } , 1500 );
            console.log($scope.drawing);

        }).error(function(){
            console.log('Error database connect!')
        });

    };

}]);


pokayokaCtr.controller( 'pokayokes' , [ '$scope' , '$http', '$routeParams', function( $scope, $http, $routeParams, numberColFilter ){

    var pokayokeName = $routeParams.name;
    $scope.name = pokayokeName;

    var number = $routeParams.number;
    $scope.number = number; 

    $http.get( 'api/admin/pokayokes/get/' + pokayokeName + '/'+ number).
    success( function( data ){
        $scope.pokayokes = data;
    }).error( function(){
        console.log( 'Error database connect!' );
    });


}]);

pokayokaCtr.filter('numberColFilter', function() {
     return function(items,number) {

        var range = [];

        var start = 7;
        var end = start + number;

        for (var i = start; i < end; i++)
        {
            range.push(items[i]);
        }

        return range;
  };
});



// -------------------------------------------
//                  ARTICLES
// -------------------------------------------

pokayokaCtr.controller( 'articles' , [ '$scope' , '$http', function( $scope, $http  ){


    $http.get( 'api/admin/articles/get' ).
    success( function( data ){
        $scope.articles = data;
    }).error( function(){
        console.log( 'Error database connect!' );
    });

}]);

pokayokaCtr.controller( 'articleCreatePart1', ['$scope', '$http', '$routeParams', 'pantonsLoader','$timeout', '$location', function( $scope, $http, $routeParams, pantonsLoader,$timeout, $location ){

    var drawingName = $routeParams.name;
    $scope.name = drawingName; 
    console.log(drawingName);


    pantonsLoader(function (data){
        $scope.pantons = data;      
    });

    $scope.articleCreatePart1 = function (article) {

        $http.post('api/admin/articles/createPart1/' + drawingName + '/' + articleName, {
            article : article
        }).success(function(){

            $timeout(function(){
                $scope.success = false;
                $scope.article = {};
            } , 1500 );



            var articleName = $scope.article.nazwa_art; 
            console.log(articleName);

            var newPath = $location.path('/admin/article/create/part2/' + drawingName + '/' +articleName);
            console.log(newPath);
            console.log($scope.article);

        }).error(function(){
            console.log('Error database connect!');
        });

    };

}]);


pokayokaCtr.factory('pantonsLoader', ['$http', '$routeParams', function($http, $routeParams) {

   var drawingName = $routeParams.name_rys;


   return function (successCallback) {

      $http.get( 'api/admin/pantons/get/' + drawingName ).
      success(successCallback).error( function(){
      console.log( 'Błąd pobrania pliku z bazy danych! pantons' );
      });
   };
}]);



// -------------------------------------------
//                  PANTONS
// -------------------------------------------

pokayokaCtr.controller( 'pantons' , [ '$scope' , '$http', function( $scope, $http ){


    $http.get( 'api/admin/pantons/get' ).
    success( function( data ){
        $scope.pantons = data;
        console.log($scope.pantons);
    }).error( function(){
        console.log( 'Błąd pobrania pliku z bazy danych! pantons' );
    });


}]);

pokayokaCtr.controller( 'createPanton' , [ '$scope' , '$http', '$timeout', function( $scope , $http,$timeout){

    $scope.createPanton = function ( panton ) {


        $http.post('api/admin/pantons/create', {
            panton : panton
        }).success(function(){
            $scope.success = true;

            $timeout(function(){
                $scope.success = false;
                $scope.panton = {};
            } , 1500 );
        }).error(function(){
            console.log('Error database connect!');
        });

    };


}]);

错误消失的文件（在我在控制器中进行更改之前，一切正常，没有错误）：

<div class="p-pantony" >
    <label ng-repeat="panton in pantons | filter : search" class="checkbox-inline" style="width: 100px; float: left; border-bottom: 10px solid rgb({{panton.R}},{{panton.G}},{{panton.B}}); margin:0 10px 10px 0;">
                                        <input type="checkbox"  ng-model="article.pan[panton.nazwa_pan]" name="pantons" ng-true-value="' {{panton.nazwa_pan}}'" ng-false-value="'x'" > {{panton.nazwa_pan}} 

   </label>
</div>

Answer 1

基本上你正在对具有重复元素的对象进行ng-repeat，你可以通过在track by $index结尾添加ng-repeat来避免这种情况，然后你可以轻松地遍历数组中的重复值

ng-repeat="panton in pantons | filter : search track by $index"

Answer 2

将<table class="col-md-6"> {your returned data would be seen here} </table>替换为var drawingName = $routeParams.name;

使用$ routeParams undefined和ngRepeat：dupes错误

2 个答案: