Question

我无法理解ng-repeat指令的奇怪行为。让我解释一下这个问题。

在第一张图片中，只要加载完成，搜索框就会第一次为空。然后，当搜索框中没有输入时，我必须渲染数据库中的所有联系人。但是它没有渲染。

在第二张图片中，我在搜索框中输入“r”然后，它应该只渲染以“r”开头的结果。但它会带来所有结果。请注意，这些结果应该在前一种情况下呈现（我的意思是当搜索框为空时）。但事实并非如此。

在第三张图片中，我在框中退格'r'。它应该呈现所有结果。但它以“r”开头呈现联系。这是错的。实际上这个结果应该在第二种情况下显示出来。从这三种情况来看，我都知道ng-repeat正在发挥作用。但它呈现最后的结果，但不是当前的结果。我甚至检查了控制台。数组更新成功。但结果渲染不会立即发生。它等待直到按下下一个键。

JS代码：

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.searchfilter = '';
  $scope.searchresult = {
    result: []
  };
  $scope.$watch('searchfilter', function() {
    $scope.renderSearchResult();

  });
  $scope.renderSearchResult = function() {
    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.sampleRemoteActionPageController.getContacts}', $scope.searchfilter,
      function(result, event) {

        if (event.status && result !== null) {
          console.log('$$$ result ');
          console.log(result);
          $scope.searchresult.result = result;
        }
      }, {
        escape: false
      }
    );

  }

});

注意：Visualforce.remoting.Manager.invokeAction - 它是salesforce中使用的远程调用。

Html代码：

<div id="second-container" class="container">
   <div class="Search col-xs-12" >
      <div id="second-container-row" class="row">
         <div id="second-container-input" class="col-xs-11" >
            <input type="text" placeholder="Search Contacts" ng-model="searchfilter" ></input>
         </div>
         <div id="second-container-phone" class="col-xs-1 Phone-container">
            <img id="Phone" class="img-sizing" src="{!URLFOR($Resource.AngularAssignment, 'searchicon.png')}" >
            </img>
         </div>
      </div>
   </div>
</div>
<div class="content" ng-repeat="x in searchresult.result" >
   <div class="row">
      <div class="col-xs-1 third-container-profile" >
         <img id="profile" class="img-sizing" src="{!URLFOR($Resource.AngularAssignment, 'profileicon.png')}" >
         </img>
      </div>
      <div class="col-xs-10" >
         <ul style="list-style-type: none;list-style-position:outside;" >
            <li> <b> {{x.Name}} </b> </li>
            <li> {{x.Title}}</li>
            <li> Comity Designs Private Ltd.</li>
         </ul>
      </div>
      <div class="col-xs-1 third-container-phone" >
         <img class="img-sizing" src="{!URLFOR($Resource.AngularAssignment, 'phoneicon.png')}" >
         </img>
      </div>
   </div>
</div>

我看了ng-model'searchfilter'，如果有变化，那么我调用远程函数来查询数据库中的相关contacts.$scope.searchresult.result - 这会存储检索到的结果。结果以数组的形式出现。此更新成功发生。只有问题是立即渲染结果。如果有人知道答案，请帮助我。

Answer 1

Angular可能不知道它需要更新范围变量。函数$scope.renderSearchResult不使用角$ http，这通常会触发摘要周期。

尝试在if (event.status && result !== null) {...}或$scope.$apply(function(){...});

中包装$timeout(function(){...});

监视功能内部的数组更新并不反映ng-repeat指令的变化

1 个答案: