Фильтр Angularjs не работает с ng-repeat

#javascript #angularjs #ionic-framework #angularjs-ng-repeat #angularjs-filter

#javascript #angularjs #ионный фреймворк #angularjs-ng-repeat #angularjs-filter

Вопрос:

Фильтр Angularjs не работает с ng-repeat при изменении значения фильтра с помощью функции… Я новичок в angularjs.

Это мои кнопки html, из которых значение фильтра должно быть изменено с помощью функции «ng-click»;

 <span>
    <a class="button button-stable" ng-class="class('static')"
       ng-click="activate('static','','')">
        All
    </a>
</span>
<span ng-repeat="profiles in cardList | unique:'profile'">
    <a class="button button-stable" ng-class="class($index)"
       ng-click="activate($index,profiles,profiles.profile);">
        {{profiles.profile}}
    </a>
</span>

Это мои функции контроллера;

 $scope.cardList = [
    {id: 1, serial_number: '35986580', card_number: 'BG9S8W7DJSKLA9', profile: '512', expiry_date: '5-1-2017'},
    {id: 2, serial_number: '35986581', card_number: 'ASLWODS6F5812H', profile: '512', expiry_date: '5-1-2017'},
    {id: 3, serial_number: '35986582', card_number: '9A5S218LSKJBMC', profile: '768', expiry_date: '5-1-2017'},
    {id: 4, serial_number: '35986583', card_number: 'XLCKDIGOSJS092', profile: '1024', expiry_date: '5-1-2017'},
    {id: 5, serial_number: '35986584', card_number: 'XKSODKO0CNJSUW', profile: '1024', expiry_date: '5-1-2017'},
    {id: 6, serial_number: '35986585', card_number: 'PLHG0G9M746172', profile: '2048', expiry_date: '5-1-2017'},
    {id: 7, serial_number: '35986586', card_number: '5DF888F9EGVNDJ', profile: '2048', expiry_date: '5-1-2017'},
    {id: 8, serial_number: '35986587', card_number: 'D6F5G49ILMA9SF', profile: '4096', expiry_date: '5-1-2017'}
];
$scope.class = function(index, item){
    if ($scope.selected == index){
        return 'button-dark active';
    } else {
        $scope.staticAll = '';
        return '';
    }
}
$scope.activate = function(index, item, profile){
    if (index != 'static'){
        $scope.selected = index;
        $scope.filterProfile = profile;
        $scope.staticAll = '';
    } else {
        $scope.selected = 'static';
        $scope.filterProfile = '';
        $scope.staticAll = 'button-dark active';
    }
}

И именно здесь фильтр не работает;

 <tr ng-repeat="card in cardList | filter: filterProfile">
                <td class="center">{{card.profile}}</td>
                <td class="center">{{card.expiry_date}}</td>
                <td class="center"><a class="button button-medium button-energized">Assign</a></td>
            </tr>

Это изображение;

скриншот

Я хочу отфильтровать результаты с помощью кнопок профиля, но значение ‘filterProfile’ не меняется…

Пожалуйста, помогите…

1. Похоже, здесь это работает нормально (очевидно, не так стилизовано).

2. Да, я случайно завершил раздел ng-controller перед таблицей. <div ng-controller="cardscontroller">..lots..of..html...</div><table><tr ng-repeat='card in cardList | filter: filterProfile'>.....card-details...</tr></table> В любом случае, спасибо, сэр…

Ответ №1:

Что вам нужно сделать, так это использовать модель для ее опции фильтра, я полагаю, что, в частности, divs с этими числами.

Теперь я не совсем понимаю, как список пожеланий профилей оружия, но в их профилях вы должны указать ng-модель, такую как ng-model = "profileSelected"

И в ваш список добавьте

 <ion-item ng-repeat="card in cardList | filter: profileSelected">

для лучшей помощи вы можете создать codepen?

1. Спасибо. Это была проблема; <div ng-controller="cardsController">....html...</div><table><tr></tr><tr ng-repeat="card in cardList | filter: filterProfile"> <td class="center">{{card.profile}}</td> <td class="center">{{card.expiry_date}}</td> <td class="center"><a class="button button-medium button-energized">Assign</a></td> </tr></table></div> Я случайно завершил тег <div> .

Ответ №2:

Я не совсем понимаю, что вы хотите для конечного продукта, но я могу сказать вам, что пользовательские фильтры определяются не так. формат выглядит примерно так

     var app = angular.module('buttonApp',[]);
    app.filter('myFilter', function() {
    return function(x) {
        //filter goodness in here
      }    
    })

Вы можете найти официальную документацию по фильтрам здесь https://docs.angularjs.org/tutorial/step_11