Question

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

角：

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();
});

如你所见，有： dayRecord控制器获取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>

当我在控制器内部调用函数时，一切正常

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

但是当我单击按钮以动态加载数据时我无法加载它我甚至用console.log（响应）检查了响应它显示http.get正在检索数据但它没有在表上刷新它

Answer 1

嗯，也许问题是你要将2个html分配给同一个控制器。如何将整个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>

Answer 2

Angular在更改DOM时可能需要一些帮助。尝试将$ scope。$ apply（）添加到加载数据函数的末尾，看看控制台上发生了什么。

angularJs：单击按钮后如何加载表数据？

2 个答案: