如何在AngularJS页面现有组件中添加表格并解决数据不显示问题

问题原因及修复方案 #

你的代码存在三个核心问题导致表格无法加载数据：

1. 多ng-app未手动初始化
   AngularJS默认只会自动初始化页面中第一个找到的ng-app实例，你页面中第一个声明的是ng-app="myApp"，后续的ng-app="app"不会被自动初始化，对应模块的控制器、数据都不会生效。
2. ng-repeat变量名不匹配
   你在表格行循环里写的是ng-repeat="itemp in ctrl.filteredList"，但后面绑定字段时用的是{{item.year}}，item变量根本不存在，自然无法渲染数据。
3. 依赖库缺失
   你声明app模块时依赖了ui.bootstrap，但代码里没有引入对应的ui.bootstrap脚本文件，会导致模块初始化失败。

完整修复后的代码参考 #

<!DOCTYPE html>
<html>
<!-- 引入AngularJS和匹配版本的ui.bootstrap依赖 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.6/ui-bootstrap-tpls.min.js"></script>
<!-- 统一将所有内容放到同一个ng-app下，避免多应用初始化问题 -->
<body ng-app="myApp">
 <h1>Order Dashboard</h1>
<div >
         <p><label for="CurrentDate">Current Date:</label><input type = "date" ng-model = "name">
        <label for="PreviousDate">Previous Date:</label><input type = "date" ng-model = "name"></p>
        </div>
<div ng-controller="MyCtrl">
    <div ng-repeat="item in items">
        <p>{{item.profName}}
        <select ng-options="profVals for profVals in item.profVals" ng-model="item.selected"></select>
    </div>
</div>

<div ng-controller="app.grid as ctrl" class="container text-center">
     <h4>Grid with Header Filters Demo</h4>

    <table class="table table-condense">
        <caption>Grid Test</caption>
        <thead>
            <tr class="bg-primary">
                <th>Year</th>
                <th>Make</th>
                <th>Model</th>
            </tr>
            <tr>
                <td>
                    <div class="control-group">
                        <div class="controls">
                            <input class="form-control" ng-model="ctrl.search.year" ng-change="ctrl.filter()" type="text">
                        </div>
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <div class="controls">
                            <input class="form-control" ng-model="ctrl.search.make" ng-change="ctrl.filter()" type="text">
                        </div>
                    </div>
                </td>
                <td>
                    <div class="control-group">
                        <div class="controls">
                            <input class="form-control" ng-model="ctrl.search.model" ng-change="ctrl.filter()" type="text">
                        </div>
                    </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <!-- 统一循环变量名为item -->
            <tr ng-repeat="item in ctrl.filteredList">
                <td>{{item.year}}</td>
                <td>{{item.make}}</td>
                <td>{{item.model}}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr class="bg-info">
                <td colspan="3"></td>
            </tr>
        </tfoot>
    </table>
</div>


<script>
// 合并模块依赖，把ui.bootstrap加到myApp的依赖列表中
var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('MyCtrl', ['$scope',
function ($scope) {
    $scope.items = [{
        profName: "Order Type",
        profEdit: true,
        profVals: ["First", "Second", "Third"]
    }, {
        profName: "Order Channel",
        profEdit: true,
        profVals: ["First", "Second", "Third"]
    }];
}]);

myApp.controller('app.grid', ['$scope', '$filter', gridCtrl]);


function gridCtrl($scope, $filter) {
    var ctrl = this;

    ctrl.items = [{
        year: 1999,
        make: 'Nissan',
        model: 'Altima'
    }, {
        year: 1999,
        make: 'Nissan',
        model: 'Cube'
    }, {
        year: 2011,
        make: 'Nissan',
        model: 'Rogue'
    }, {
        year: 2011,
        make: 'Nissan',
        model: 'xTerra'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Altima'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Cube'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Rogue'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'xTerra'
    }, {
        year: 1999,
        make: 'Toyota',
        model: 'Corolla'
    }, {
        year: 1999,
        make: 'Toyota',
        model: 'Yaris'
    }, {
        year: 2012,
        make: 'Toyota',
        model: 'Camry'
    }, {
        year: 2012,
        make: 'Toyota',
        model: 'Rav4'
    }, {
        year: 2013,
        make: 'Toyota',
        model: 'Corolla'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Yaris'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Camry'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Rav4'
    }];

    ctrl.filteredList = ctrl.items;
    ctrl.search = {};

    ctrl.filter = function () {
        this.filteredList = $filter('filter')(ctrl.items, ctrl.search);
    }

}
</script>

 </body>
</html>

内容的提问来源于stack exchange，提问作者b_J