Динамическое изменение размера страницы разбиения области от значения угловой области

Question

Я пытаюсь разрешить пользователю изменять количество строк в таблице, которая будет показана. Веб-приложение используется для всех типов устройств, поэтому пользователю необходимо будет выбрать количество строк для отображения, чтобы свести к минимуму прокрутку.

Это JavaScript моделируют

$scope.pageSizes = [ 
    { size: 10}, 
    { size: 25, isSelected: true }, 
    { size: 50} 
]; 

HTML код. Это мой селектор размера страницы.

<li ng-repeat="pageSize in pageSizes"> 
    <a href="javascript:void(0)" ng-click="changePageSize(pageSize.size)"><span ng-class="{ orange: pageSize.isSelected }">{{pageSize.size}}</span></a> 
</li> 

И таблица в том же файле HTML.

<table st-table="users" st-safe-src="safeUsers" class="table-striped argus-table"> 
    <thead> 
    <tr> 
     <th st-sort="id" class="sortable min-width">Id</th> 
     <th st-sort="username" class="sortable">Username</th> 
     <th st-sort="email" class="sortable">Email</th> 
     <th class="table-action-header"></th> 
     <th class="table-action-header"></th> 
     <th class="table-action-header"></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="user in users"> 
     <td>ID</td> 
     <td>Username</td> 
     <td>Email</td> 
     <td>Option 1</td> 
     <td>Option 2</td> 
     <td>Option 3</td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td class="text-center" st-pagination="" st-items-by-page="25" colspan="6"></td> 
    </tr> 
    </tfoot> 
</table> 

st-items-by-page="25" где я полагаю, что я должен поставить свой угловой код.

Я попытался с помощью функции области действия, чтобы найти новый выбранный

$scope.changePageSize = function (pageSize) { 
    $scope.filter.pageSize = pageSize; 

    _.find($scope.pageSizes, function (page) { 
    if (page === pageSize) { 
     $scope.selectedPageSize = page.size; 
     page.isSelected = true; 
    } 
    else 
     page.isSelected = false; 
    }); 
}; 

И сноска снова

<tfoot> 
    <tr> 
    <td class="text-center" st-pagination="" st-items-by-page="{{selectedPageSize}}" colspan="6"></td> 
    </tr> 
</tfoot> 

Однако это вызывает ошибку

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{getSelectedPageSize}}] starting at [{getSelectedPageSize}}].

Любая помощь будет оценена по достоинству. Благодаря

Answer 1

Не предоставляйте элементов на странице, используя шаблон обозначения ({{scopeValue}}), просто обеспечить выражение, разрешенное к значению у вас на $scope

это

st-items-by-page="{{selectedPageSize}}" 

должно быть, как это

st-items-by-page="selectedPageSize" 

Существует пример в docs