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

重要的是要意识到调用 $resource 对象方法 立即返回一个空引用（对象或数组取决于 是数组）。一旦数据从服务器返回，现有的 参考是用实际数据填充的。

您需要绑定到您视图中的对象$scope.namelist，或者，等到promise 被解决，然后在成功回调中分配属性。

一种解决方法如下；

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>