我的Angular视图没有用数据表单服务器更新

My Angular view is not updated with data form server

本文关键字：数据表 表单 服务器 更新 数据 有用 Angular 视图 我的      更新时间：2023-09-26

我使用Angularjs，并调用表单服务器来检索数据。数据已成功检索，但我的视图未更新。我不明白为什么。这是我使用的代码。

Angularjs和html代码：

<div class="row custom-margin" ng-controller="ListCtlr" ng-init="initData()">
     <form class="form-inline" role="form" id="formId" name="formId">
     <div class="form-group">
      <label for="searchInput">Data to search</label>
        <input ng-model="searchInput" placeholder="Enter term to search">
      </div>
      <button type="submitSearch" class="btn btn-primary" ng-click="search()">Go</button>
    </form>
    </div>
    <div class="table-responsive">
    <table class="table">
        <thead>
            <tr class="info">
                <th colspan="4" class="centertext">Name</th>
                <th colspan="3" class="centertext">Age</th>
           </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in persons">
           <td>{{person.name}}</td>
           <td>{{person.age}}</td>
           </tr>
      </tbody>
    </table>
    </div>
   </div>

控制器代码：

function ListCtlr($scope, $http, $location,$filter) {
    $scope.formId = {searchInput: ''};
    $scope.search = function () {
        var url='server/search/'+this.searchInput;
        $http.get(url)
            .success(function (data) {
                $scope.persons = data;
            })
            .error(function(data){
                $scope.error = data;
            });
    };                
}

当我检查从服务器检索的数据时，我得到了以下JSON数据：

[{"name":"John","age":12},{"name":"Mary","age":25},{"name":"Garry","age":28}]

请问少了什么？

更改

    <tr ng:repeat="person in persons">
       <td>{{person.name}}</td>
       <td>{{person.age}}</td>
    </tr>

至

    <tr ng-repeat="person in persons">
       <td>{{person.name}}</td>
       <td>{{person.age}}</td>
    </tr>

问题是您的ListCtlr控制器被放置在不包含ng repeat的div上。

为了解决这个问题，创建一个外部div，将ng控制器放在该div上：

<div ng-controller="ListCtlr">
   ... (place contents of your html here) ...
</div>

这样可以确保ListCtlr的作用域包括ng repeat。

注意：请确保删除内部分区中定义的ng controller="ListCtlr"。

相关文章：