我是Angular的新手，我在浏览页面上显示数据有问题。我怎么知道为什么这个问题，因为来自API和控制台中的表单控制器的所有数据都显示正确。
我的控制器：
'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('Błąd połączenia z bazą danych.')
});
};
}]);
pokayokaCtr.controller( 'pokayokes' , [ '$scope' , '$http', '$routeParams', function( $scope, $http, $routeParams ){
// var drawingId = $routeParams.id;
// $scope.id = drawingId;
var pokayokeName = $routeParams.name;
$scope.name = pokayokeName;
$http.get( 'api/admin/pokayokes/get/' + pokayokeName ).
success( function( data ){
$scope.pokayokes = data;
// var test = data.ile_py
// console.log( test );
}).error( function(){
console.log( 'Błąd pobrania pliku z bazy danych poka-yoke' );
});
}]);
pokayokaCtr.filter('rangeFilter', function() {
return function(input, total) {
total = parseInt(total);
for (var i=6; i<=total; i++)
input.push(i);
return input;
};
});
// -------------------------------------------
// 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( 'Błąd pobrania pliku z bazy danych! articles' );
});
}]);
pokayokaCtr.controller( 'articleCreatePart1' , [ '$scope' ,'$routeParams', 'pantonsLoader', function( $scope, $routeParams, pantonsLoader ){
var drawingName = $routeParams.name_rys;
$scope.name_rys = drawingName;
pantonsLoader(function (data){
$scope.pantons = data;
console.log(data);
});
$scope.articleCreatePart1 = function (article) {
$http.post('api/admin/articles/create' + drawingName, {
article : article
}).success(function(){
$timeout(function(){
$scope.success = false;
$scope.article = {};
} , 1500 );
console.log($scope.article);
}).error(function(){
console.log('Błąd połączenia z bazą danych.')
});
};
}]);
pokayokaCtr.factory('pantonsLoader', ['$http', function($http) {
return function () {
$http.get( 'api/admin/pantons/get' ).
success( function( data ){
console.log(data);
}).error( function(){
console.log( 'Błąd pobrania pliku z bazy danych! pantons' );
});
};
}])
html中的部分表单页面视图（此部分位于ng-view中）：
<div class="col-lg-12">
<div class="flat-panel">
<div class="flat-panel-header">
<h3 class="page-header">Choose panton's color </h3>
<div class="row">
<div class="form-group col-md-12">
<label for="nazwaRysunku">Search name: </label>
<input type="text" class="form-control" placeholder="szukaj..." ng-model="search.nazwa_pan">
</div>
</div>
</div>
<div class="flat-panel-body">
<div class="row">
<div class="col-md-12" >
<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.pantonP" > x -->
<input type="checkbox" ng-model="panton.nazwa_pan" ng-true-value="true" ng-false-value="false" > {{panton.nazwa_pan}}
</label>
</div>
</div>
</div>
</div> <!-- .flat-panel-body -->
</div>
</div>
</div> <!-- /.row -->
我在另一个文件中遇到同样的问题 - 我不能使用普通绑定，但ng-repeat工作正常。
12.08.2015 - 编辑：
我制作过滤器并添加到控制器，我的代码如下：
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 = 4;
var end = start + number;
for (var i = start; i < end; i++)
{
range.push(items[i]);
}
return range;
};
});
我检查了控制器和过滤器中的断点和“数字”是否正常，数字有数字，但“结束”和“我”未定义。这是为什么？这个过滤器好写吗？因为当我将此过滤器添加到页面上的html时显示'[]'。
我添加了这样的过滤器（下面的代码），这没关系？
<thead>
<tr>
<th>Lp.</th>
<th>Image</th>
<th>Name <i class="fa fa-chevron-down"></i> </th>
<th >Colors in article</th>
<th ng-repeat="pokayoke in pokayokes">{{$index + 1 | numberColFilter }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pokayoke in pokayokes" >
<td>{{$index + 1}}</td>
<td><a href=""> <i class="fa fa-picture-o"></i> View</a></td>
<td>{{pokayoke.name_dra</i> </td>
<td>{{pokayoke.colors_art}}</td>
<td ng-repeat="num in pokayoke" >{{ num | numberColFilter}}</td>
</tr>
</tbody>
答案 0 :(得分：0)
您似乎已经拥有了一个您正在使用的文本框，因此用户可以按术语搜索过滤器，并将其存储到$scope.search.nazwa_pan。但是，在过滤器中，您只需对$scope.search进行过滤即可，因此它实际上并没有像您要查找的那样进行比较。
编辑（以匹配更新的问题）：
在控制器的第一行，您无需在控制器中引用过滤器。
pokayokaCtr.controller( 'pokayokes' , [ '$scope' , '$http', '$routeParams', function( $scope, $http, $routeParams, numberColFilter )
应该是
pokayokaCtr.controller( 'pokayokes' , [ '$scope' , '$http', '$routeParams', function( $scope, $http, $routeParams)
此外，您的过滤器需要传入两个参数，但您只需向其提供要迭代的项目 - 您不会使用＆＃39;数字＆＃39;来证明它。争论。相反，您需要执行以下操作（因为以下＆＃39; 4＆＃39;是传递到过滤器函数的第二个参数的值）。
<td ng-repeat="num in pokayoke" >{{ num | numberColFilter: 4}}</td>
或者，如果您在$ scope.argumentNumber中存储数字，请改用以下内容。
<td ng-repeat="num in pokayoke" >{{ num | numberColFilter: argumentNumber}}</td>