javascript - Angular Js : how to load table data after clicking a button?

Question

大家好，如果我的问题太长，我很抱歉这是我在 Stack over flow 中的第一个问题:) ;我是 angularJs 的新手，所以我面临这个问题我试图制作一个按钮，将通过 http.get 函数检索的 json 数据加载到带有 ng-repeat 的表中我想在单击按钮后加载数据

Angular :

app.controller('dayRecord', function ($scope, $http) {
    var date = dateToString("dailyData")
        ,http;
    $scope.headers = ["company", "ticker", "ccy", "last", "close", "chg", "bid", "ask", "trades", "volume", "turnover"];
    //LoadDate : function to load StockRecords for a given day
    $scope.loadData = function () {

        http = "http://localhost:63342/nasdak/app/data?date=";//the REST service Server to fetch the day stock recrod json data
        http += date; //
        $http.get(http)
            .success(function (response) {
                console.log(response);

                $scope.first = response.balticMainList;
                $scope.columnSort = {sortColumn: 'turnover', reverse: true};
            });

    }
    $scope.loadData();
});

正如你在这里看到的:日记录 Controller 获取json数据的loadData函数

这是我尝试加载的表的 html 代码

HTML

<div ng-controller="dayRecord" style="display: inline;">
        <label for="dailyData">Show Stock For Day :</label>
        <input type="text" id="dailyData" name="dailyData" >
        <button id = "dailyStocksLoad" ng-click="loadData()">load</button>
    </div>
<div class ="dailyViewContainer" ng-controller="dayRecord">

    <div >
        <h1>Baltic Main List</h1>
        <table id ="myTable" >
            <thead>
            <tr >
                <th  ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
                <td style="text-align: left">{{ x.company }}</td>
                <td>{{ x.ticker }}</td>
                <td>{{ x.ccy }}</td>
                <td>{{ x.last }}</td>
                <td>{{ x.close }}</td>
                <td>{{ x.chg }}% </td>
                <td>{{ x.bid }}</td>
                <td>{{ x.ask }}</td>
                <td>{{ x.trades }}</td>
                <td>{{ x.volume }}</td>
                <td>{{ x.turnover }}</td>
            </tr>
            </tbody>
        </table>
    </div>

当我调用 Controller 内的函数时，一切正常

 app.controller('dayRecord', function ($scope, $http) {
        ...
        $scope.loadData = function () {
        ...
        }
        
        
        $scope.loadData();
    });

但是当我单击按钮动态加载数据时，我无法加载它，我什至使用 console.log(response) 检查了响应，它显示 http.get 正在检索数据，但它没有在表格上刷新它

Answer 1

嗯，也许问题是您将 2 段 html 分配给同一个 Controller 。将整个 html 包装到 1 个 div 元素中并将 ng-controller 放在那里怎么样，如下所示:

<div ng-controller="dayRecord">
  <div style="display: inline;">
    <label for="dailyData">Show Stock For Day :</label>
    <input type="text" id="dailyData" name="dailyData" >
    <button id = "dailyStocksLoad" ng-click="loadData()">load</button>
  </div>
  <div class ="dailyViewContainer">

  <div >
    <h1>Baltic Main List</h1>
    <table id ="myTable" >
        <thead>
        <tr >
            <th  ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
            <td style="text-align: left">{{ x.company }}</td>
            <td>{{ x.ticker }}</td>
            <td>{{ x.ccy }}</td>
            <td>{{ x.last }}</td>
            <td>{{ x.close }}</td>
            <td>{{ x.chg }}% </td>
            <td>{{ x.bid }}</td>
            <td>{{ x.ask }}</td>
            <td>{{ x.trades }}</td>
            <td>{{ x.volume }}</td>
            <td>{{ x.turnover }}</td>
        </tr>
        </tbody>
    </table>
  </div>
</div>