在Angular

时间:2015-08-10 18:49:16

标签: javascript html mysql angularjs

我需要在Angular表中生成将生成动态数字的列,但是我需要加载表格数据库的数量,这个信息将显示将生成的列数,然后将加载日期表格这个表的数据库中的另一个表(用HTML表示)但是我只需要将数据从6列加载到我在本评论开头写的关于它的数字。

我知道我需要在tr,td上使用ng-repeat并编写自定义过滤器,在网站上显示范围列,但我不知道这一切是如何合并的?如何从我使用的数据库(API)号码转移然后添加到我在for循环中使用的过滤器,然后将其添加到查看页面,其中将显示包含我想要的数据的漂亮表格?

您可以看到here.

的输出图片

到目前为止我的代码 - 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 ){

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

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

}]);

// pokayokaCtr.filter('rangeFilter', function() {
//       return function(input, total) {
//      total = parseInt(total);
//      for (var i=6; i<=total; i++)
//        input.push(i);
//      return input;
//   };
// });

查看页面:

<div id="page-wrapper" ng-controller="pokayokes">
    <div class="container-fluid">

    <!-- Page Heading -->
    <div class="row">
            <div class="col-md-12">
                <br>
                <div class="flat-panel">
                    <div class="flat-panel-header">
                        <h2 class="page-header" ng-repeat="pokayoke in pokayokes | limitTo: 1"><i class="fa fa-paint-brush"></i> Drawing number: {{ pokayoke.nazwa_rys }}</span></h2>

                    </div>
                    <div class="flat-panel-body">
                        <button class="btn btn-warning"  href="#"><i class="fa fa-pencil-square-o"></i> Edit name</button>
                        <button class="btn btn-danger pull-right" ng-click="delete(drawing, $index)"><i class="fa fa-times"></i> Delete</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="flat-panel">
                    <div class="flat-panel-header">
                                <h2 class="pull-left">Articles in drawing</h2>
                                <a ng-repeat="pokayoke in pokayokes | limitTo: 1" class="pull-right btn btn-primary"  href="#/admin/article/create/part1/{{ pokayoke.nazwa_rys}}" style="margin: 20px 0 15px;"><i class="fa fa-plus"></i> Add new article</a>                             
                    </div>
                <div class="clearfix"></div>
                <div class="flat-panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Image</th>
                                    <th>Article name <i class="fa fa-chevron-down"></i> </th>
                                    <th>Colors in article</th>
                                    <th ng-repeat="pokayoke in pokayokes">{{$index}}</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.nazwa_art}}</i> </td>
                                    <td>{{pokayoke.kolory_art}}</td>
                                    <td ng-repeat="num in pokayoke" >{{ num }}</td>   

                                </tr>                               
                            </tbody>
                        </table>
                    </div> <!-- responive -->
                </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

    </div>
    <!-- /.container-fluid -->

</div>
<!-- /#page-wrapper -->

输出我现在拥有的内容:here 我只想要前4列和列,其中有&#39; x&#39;。 我不知道如何写过滤器。

0 个答案:

没有答案