Question

我正在使用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}]

请问有什么遗漏？

Answer 1

更改

    <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>

Answer 2

问题是你的ListCtlr控制器放在一个不包含ng-repeat的div上。

要解决此问题，请创建一个外部div，将ng-controller放在该div上：

<div ng-controller="ListCtlr">

   ... (place contents of your html here) ...

</div>

这可确保ListCtlr的范围包括ng-repeat。

注意：请务必删除内部div中定义的ng-controller =“ListCtlr”。

我的Angular视图未使用数据表单服务器进行更新

2 个答案: