Вопрос по angular-filters, frameworks, ng-repeat, angularjs, javascript – Как фильтровать (ключ, значение) с помощью ng-repeat в AngularJs?

108

Я пытаюсь сделать что-то вроде:


    
        {{k}} {{v.pos}}
    

AngularJs Part:

function TestCtrl($scope) 
{
    $scope.items = {
                     'A2F0C7':{'secId':'12345', 'pos':'a20'},
                     'C8B3D1':{'pos':'b10'}
                   };

    $scope.hasSecurityId = function(k,v)
    {
       return v.hasOwnProperty('secId');
    }
}

Но почему-то он показывает мне все предметы. Как я могу отфильтровать (ключ, значение)?

Это не то, как вы создаете фильтр, смотрите надокументацияи, как сказал Робин, пример, пожалуйста. Yahya KACEM
индекс и счет должны быть доступны в этой области IIRC Shanimal
Я уже дал полный пример, и я знаю, как использовать фильтры. Я просто спросил "как использовать фильтр с (ключ, значение) ". Vural Acar
Пожалуйста, предоставьте несколько примеров данных для предметов. Или дай нам скрипку;) Robin Drexler

Ваш Ответ

8   ответов
0

Хотя этот вопрос довольно старый, яЯ хотел бы поделиться своим решением для разработчиков Angular 1. Смысл в том, чтобы просто повторно использовать оригинальный угловой фильтр, но прозрачно передавая любые объекты в виде массива.

app.filter('objectFilter', function ($filter) {
    return function (items, searchToken) {
        // use the original input
        var subject = items;

        if (typeof(items) == 'object' && !Array.isArray(items)) {
            // or use a wrapper array, if we have an object
            subject = [];

            for (var i in items) {
                subject.push(items[i]);
            }
        }

        // finally, apply the original angular filter
        return $filter('filter')(subject, searchToken);
    }
});

используйте это так:

{{item | json}}

вотplunker

25

Также вы можете использоватьng-repeat с :ng-if

Умная. Это сэкономило много времени. Safwan
11

Вы можете просто использоватьangular.filter модуль, а затем вы можете фильтровать даже по вложенным свойствам.

увидеть:jsbin

2 примера:

JS:

angular.module('app', ['angular.filter'])
  .controller('MainCtrl', function($scope) {
  //your example data
  $scope.items = { 
    'A2F0C7':{ secId:'12345', pos:'a20' },
    'C8B3D1':{ pos:'b10' }
  };
  //more advantage example
  $scope.nestedItems = { 
    'A2F0C7':{
      details: { secId:'12345', pos:'a20' }
    },
    'C8B3D1':{
      details: { pos:'a20' }
    },
    'F5B3R1': { secId:'12345', pos:'a20' }
  };
});

HTML:

  Example1:
  

{{ item.$key }}, {{ item }}

Example2:

{{ item.$key }}, {{ item }}

Вы должны раскрыть этоangular.filter не является основным угловым модулем, и вы являетесь его автором. demisx
Похоже,toArray фильтра больше нет Есть ли замена, потому чтоfilter фильтр по-прежнему не позволяет объекты? trysis
0

Я сделал немного больше общего фильтра, который ямы уже использовали в нескольких проектах:

  • объект = объект, который должен быть отфильтрован
  • поле = поле внутри этого объекта, который мыбуду фильтровать
  • фильтр = значение фильтра, который должен соответствовать полю

HTML:


Number: {{value.customerNo}}

Name: {{value.customerName}}

JS:

  $scope.filter = function(object, field, filter) {
    if (!object) return {};
    if (!filter) return object;

    var filteredObject = {};
    Object.keys(object).forEach(function(key) {
      if (object[key][field] === filter) {
        filteredObject[key] = object[key];
      }
    });

    return filteredObject;
  };
126

угловатыйфильтры может применяться только к массивам, а не к объектам, из угловыхs API - "

Выбирает подмножество элементов из массива и возвращает его как новый массив. "

У вас есть два варианта здесь:

1) двигаться$scope.items в массив или -

2) предварительно отфильтроватьng-repeat предметы, как это:

{{k}} {{v.pos}}

И на контроллере:

$scope.filterSecId = function(items) {
    var result = {};
    angular.forEach(items, function(value, key) {
        if (!value.hasOwnProperty('secId')) {
            result[key] = value;
        }
    });
    return result;
}

jsfiddle:http://jsfiddle.net/bmleite/WA2BE/

@kentcdodds don 'т ссылки, которые не являются бесплатными! Sebastian
Полезный комментарий. Это бросало меня в тупик; Я ожидал, что сможет фильтроватьлюбой итерация. Большое спасибо. :) Chris Krycho
Почему бы просто не добавить ng-if на повторяющийся элемент? CarbonDry
Примечание: теперь это анти-шаблон. Angular 1.3 теперь имеет фильтры без сохранения состояния (egghead.io/lessons/...) так что вы'определенно хочу создать фильтр для этого. kentcdodds
7

Это довольно поздно, но я искал похожий фильтр и закончил, используя что-то вроде этого:

{{k}} {{v.pos}}
Как ты заставил это работать? Когда я использую фильтр с повторяющимся по ng объектом, я получаю ошибку, которая является ожидаемой на основе документации Angular. tonestrike
45

Мое решение было бы создать собственный фильтр и использовать его:

app.filter('with', function() {
  return function(items, field) {
        var result = {};
        angular.forEach(items, function(value, key) {
            if (!value.hasOwnProperty(field)) {
                result[key] = value;
            }
        });
        return result;
    };
});

И в HTML:

 
{{k}} {{v.pos}}
однако, это будет цикл n * n раз. maxisam
21

Или сим, используй

ng-show="v.hasOwnProperty('secId')"

Смотрите обновленное решение здесь:

http://jsfiddle.net/RFontana/WA2BE/93/

Спасибо .. Я использовал это, но сng-if вместо Zim

Похожие вопросы