Предикат AngularJS в директиве не работает

У меня проблема с сортировкой в ​​директиве. Я хочу динамически создать заголовок таблицы, используя объект со свойствами «Имя» и «Текст». «Имя» содержит логическое имя, а «Текст» — отображаемое имя поля. Все работает нормально, когда я не использую предикат в ng-repeat и динамических столбцах.

HTML:

<ng-my-table 
    ng-columns="[
            { Text: 'First name', Name: 'FirstName' },
            { Text: 'Last name', Name: 'LastName' }
        ]">
</ng-my-table>

Шаблон директивы:

<thead>
    <tr>
        <th ng-repeat="column in ngColumns" ng-click="predicate='{{column.Name}}'; reverse=!reverse">{{column.Text}}</th>
    </tr>
</thead>

Скомпилированный заголовок таблицы выглядит так же, как статический, но не работает.

Кто-нибудь может мне помочь? Спасибо.


html angularjs angularjs-directive directive
person Jan Holinka    schedule 17.02.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вам нужно связать предикат с зацикленным объектом области.

То есть ваша разметка должна быть:

<th ng-repeat="column in ngColumns| orderBy:predicate:reverse"
    ng-click="predicate='{{column.Name}}'; reverse=!reverse">{{column.Text}}</th>

Однако предложение - переместить код внутри директивы ng-click в функцию контроллера области - проще поддерживать.

Итак, с такой функцией в вашем контроллере:

//Don't forget to initialize
$scope.predicate = $scope.ngColumns[0].Name;
$scope.reverse = false;

$scope.sortColumn = function (columName) {
    $scope.predicate = columnName;
    $scope.reverse = !$scope.reverse
}

ваш код просмотра теперь будет выглядеть так:

<th ng-repeat="column in ngColumns| orderBy:predicate:reverse"
        ng-click="sortColumn(column.Name)">{{column.Text}}</th>
person callmekatootie    schedule 17.02.2014
comment
Спасибо за ответ. Пример неверен, потому что я не хочу сортировать столбцы таблицы, а строки таблицы по определенному столбцу. Я использую модель ngColumns для theader и ngModel для tbody со списком данных. Вторая часть работает после небольших изменений, спасибо! - person Jan Holinka; 18.02.2014

arrow_upward
1
arrow_downward

predicate='{{column.Name}}'; выглядит как источник проблемы.

Директива ng-click не использует синтаксис выражения angular. Попробуйте так написать predicate=column.Name;

person pgregory    schedule 17.02.2014

arrow_upward
1
arrow_downward

Вот рабочий образец:

Шаблон директивы:

<thead>
    <tr>
        <th ng-repeat="column in ngColumns" ng-click="SortColumn(column.Name)">{{column.Text}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in ngModel | orderBy:predicate:reverse">
    ...
    ...

Директивный контроллер:

controller: ["$scope", "$http", function ($scope, $http) {
            // convert string to object
            $scope.ngColumns = $scope.$eval($scope.ngColumns);
            // models for sorting
            $scope.predicate = $scope.ngColumns[0].Name;
            $scope.reverse = false;
            // sort function
            $scope.SortColumn = function (columnName) {
                $scope.predicate = columnName;
                $scope.reverse = !$scope.reverse
            }
        }]

Я надеюсь, что это поможет кому-то.

person Jan Holinka    schedule 18.02.2014