table 行中的 ng-repeat 不显示行

Question

我正在尝试使用 Angularjs 设计动态 table，我发现 ng-repeat 函数很有用。

经过一些尝试，我不知道它是如何不起作用的，因为我的属性运行良好，但我没有显示任何东西

这是我的 .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'
                }];}])

这是我的 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>

我哪里错了？

Answer 1

您忘记完成控制器功能这是更正后的控制器代码 Jsfiddle

js代码

var app = angular.module('myApp', []);

app.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'
    }];
  }
]);

这会起作用

Answer 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'
                }];
            }]);

table 行中的 ng-repeat 不显示行

ng-repeat in table rows does not shows rows

angularjs

angularjs-ng-repeat