如何使用表外的ng-click事件修改html表的内容,该事件从RESTFUL API获取数据

时间:2014-10-27 20:27:01

标签: html angularjs

如何使用桌面外的Angujarjs点击事件填充表格。 div或按钮中的单击事件使用ng-click从Web API获取数据,并更新应该用于填充表格的角度模型。

到目前为止,点击和收集数据的过程正在运行,但表格尚未填写。 ng-repeat不起作用。

我现在有了这段代码,但它无效:

NG控制器

//showParticipantCollectedData is working and I get the data from the API
   var DataCollectionSetupController = function ($scope, metricRepository, participantRepository, dataCollectionSetupRepository) {
        ....
        $scope.showParticipantCollectedData = function (petsId) {
            $scope.collectedDataByPetsId = dataCollectionSetupRepository.getCollectedDataFromPets(petsId);
        };

 .....

    }

查看

....
   <button data-ng-click="showParticipantCollectedData(100)">Test</button>
                <div class="col-sm-9">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th width="4%">#</th>
                                    <th width="40%">Variable Name</th>
                                    <th width="23%">Value</th>
                                    <th width="33%">Measure</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ng-repeat="measure in collectedDataByPetsId">
                                    <td>{{measure.Id}}</td>
                                    <td>{{measure.Value}}</td>
                                    <td>{{measure.MetricId}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
....

1 个答案:

答案 0 :(得分:0)

您展示的代码似乎是同步的,但我希望您的数据API能够返回一个承诺吗?

所以我想这一行:

$scope.collectedDataByPetsId = 
       dataCollectionSetupRepository.getCollectedDataFromPets(petsId);

实际上看起来应该是这样的:

dataCollectionSetupRepository.getCollectedDataFromPets(petsId)
  .then(function(result){
    $scope.collectedDataByPetsId = result.data;
  });

也许您实际上是将您的属性绑定到promise而不是异步API调用的结果?