ng-repeat in table rows does not shows rows

时间:2017-07-12 08:21:37

标签: angularjs angularjs-ng-repeat

I'm trying to design a dynamic table with Angularjs, and I found useful the ng-repeat function.

After some tries i'm not aware how it does not works, cause my attribute works well, but my does not show anything

here's my .js

.controller('DispatcherFilterController',
        [ '$scope',
function($scope,{
            $scope.dispatcherSearch=[{
                  id: 1,
                  name: 'out1',
                  description :'desc1',
                  vat_number :'378297',
                  dispatch_type :'daily',
                  output : 'out1'
                }, {
                    id: 2,
                      name: 'out2',
                      description :'desc2',
                      vat_number :'3782f97',
                      dispatch_type :'daily',
                      output : 'out2'
                },
                {
                    id: 3,
                      name: 'out3',
                      description :'desc3',
                      vat_number :'fssfes',
                      dispatch_type :'daily',
                      output : 'out3'
                }];}])

and Here is my HTML:

   <div class="table-responsive">
    <table class="table" ng-controller="DispatcherFilterController">
        <thead>
            <tr>
                <th class="col-order"><a class="sort asc" href="#" title="">{{'NAME'
                                    | translate}}</a>
                </th>
                <th class="col-order"><a class="sort asc" href="#" title="">{{'DESCRIPTION'
                                    | translate}}</a>
                </th>
                <th class="col-order"><a class="sort asc" href="#" title="">{{'VAT_NUMBER'
                                    | translate}}</a>
                </th>
                <th class="col-order"><a class="sort asc" href="#" title="">{{'DISPATCH_TYPE'
                                    | translate}}</a>
                </th>
                <th class="col-order"><a class="sort asc" href="#" title="">{{'OUTPUT'
                                    | translate}}</a>
                </th>
                <th class="colf-cmd"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in dispatcherSearch">
                <td>{{row.name}}</td>
                <td>{{row.description}}</td>
                <td>{{row.vat_number}}</td>
                <td>{{row.dispatch_type}}</td>
                <td>{{row.output}}</td>
                <td class="colf-cmd">
                    <div class="form-inline pull-right">
                        <div class="form-group">
                            <div class="form-btn-container">
                                <button type="button" class="btn btn-primary pull-right" ng-click="spot()">{{'SPOT' | translate}}</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-btn-container">
                                <button type="button" class="btn btn-primary pull-right" ng-click="periodic()">{{'PERIODIC' | translate}}</button>
                            </div>
                        </div>
                    </div>

                </td>

            </tr>
        </tbody>
    </table>

where did i go wrong?

2 个答案:

答案 0 :(得分:2)

您的控制器代码中存在语法错误。此外,您还没有为translate过滤器提供任何代码,因此我也将其删除了,并且我们在这里有一个有效的 Solution

<强>控制器

.controller('DispatcherFilterController', ['$scope',
            function($scope) {
                $scope.dispatcherSearch = [{
                    id: 1,
                    name: 'out1',
                    description: 'desc1',
                    vat_number: '378297',
                    dispatch_type: 'daily',
                    output: 'out1'
                }, {
                    id: 2,
                    name: 'out2',
                    description: 'desc2',
                    vat_number: '3782f97',
                    dispatch_type: 'daily',
                    output: 'out2'
                }, {
                    id: 3,
                    name: 'out3',
                    description: 'desc3',
                    vat_number: 'fssfes',
                    dispatch_type: 'daily',
                    output: 'out3'
                }];
            }]);

答案 1 :(得分:0)

您忘了完成控制器功能 这是更正后的控制器代码{{3}}

Js代码

MachineTime

这将有效