在AngularJS中返回作用域變量的長度

Question

我想返回包含對象數組的作用域變量的值長度。那麼，我的想法是減少html視圖並將變量存儲在我的控制器中。問題是，當我稱之爲我得到的總長度爲0

下面的代碼被認爲是一個視圖控制檯值：

<div class="panel panel-default"> 
     <div class="panel-body bg-form"> 
      <div class="col-sm-4"> 
       <strong>total:</strong> 
      </div> 
      <div class="col-sm-3"> 
       <span class="badge"> {{ nameslist.length }}</span> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-body bg-form"> 
      <div class="col-sm-4"> 
       <strong>filtered:</strong> 
      </div> 
      <div class="col-sm-3"> 
       <span class="badge"> {{ filteredNames.length }}</span> 
      </div> 
     </div> 
    </div> 
... 
<tr ng-repeat="names in filteredNames = (nameslist | orderBy:sortType:sortReverse)" class="show-cursor"> 
     <td>{{ names.fname }}</td> 
     <td>{{ names.lname }}</td> 
</tr> 

這些應該是新的代碼：

<div class="panel panel-default" ng-repeat="sResult in searchResult"> 
     <div class="panel-body bg-form"> 
      <div class="col-sm-4"> 
       <strong>{{ sResult.title }}:</strong> 
      </div> 
      <div class="col-sm-3"> 
       <span class="badge"> {{ sResult.content }}</span> 
      </div> 
     </div> 
    </div> 

Ctrl鍵：

$scope.nameslist = CrudService.getAllNames(); 
$scope.searchResult = [ 
      { 
       title: 'total', 
       content: $scope.nameslist.length 
      }, 
      { 
       title: 'filtered', 
       content: $scope.filteredNames.length 
      } 
     ]; 

服務：

myApp.factory('CrudService', ['ResService', 
    function (ResService) { 
     return { 
      getAllNames: function() { 
       return ResService.names.query(); 
      }, 
... 
}]); 

myApp.factory('ResService', ['$resource', 'baseUrl', 
    function ($resource, baseUrl) { 
     return { 
      names: $resource(baseUrl + '/api/names/:Id/:fname', { 
       Id: '@Id', 
       fname: '@fname' 
      }, { 
       'update': { 
        method: 'PUT' 
       } 
      }), 
... 
}]); 

如何僅返回數組的數量和過濾的數組的數量？

Answer 1

該行不會立即填充該對象;

$scope.nameslist = CrudService.getAllNames(); 

從angular documentation on $resource：

意識到調用$資源對象方法 立即返回一個空引用（取決於 IsArray的物體或陣列）是很重要的。一旦數據從服務器返回，現有的 引用就會填充實際數據。

您需要在視圖中綁定到對象$scope.namelist，或者等到承諾解析完成，然後在成功回調中分配屬性。

一個解決方案如下;

的Javascript

$scope.searchResult = [{ 
    title: 'total', 
    content: $scope.nameslist // holds a reference to the item returned by CrudService 
}] 

查看

<div class="col-sm-4"> 
    <strong>{{ searchResult.title }}:</strong> 
</div> 
<div class="col-sm-3"> 
    <span class="badge"> {{ searchResult.content.length }}</span> 
</div>