How to Filter (Key, Value) with Ng-Repeat in Angularjs

How to filter (key, value) with ng-repeat in AngularJs?

Angular filters can only be applied to arrays and not objects, from angular's API -

"Selects a subset of items from array and returns it as a new array."

You have two options here:

1) move $scope.items to an array or -

2) pre-filter the ng-repeat items, like this:

<div ng-repeat="(k,v) in filterSecId(items)">
    {{k}} {{v.pos}}
</div>

And on the Controller:

$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/

How can I filter by value in ng-repeat(key, value) and only display if the value is not null?

You can hide the empty values

Try like this

<div class="hero-unit" ng-repeat="(key, value) in selectedItem" ng-hide="!value">
                            <span class="hero-title">{{key|insertSpaces}} : </span>     
                            <span class="hero-content">{{ value }}</span>

How do you filter an object of objects with unique keys in an angular ng-repeat?

I figured it out, I needed to create a custom filter. The below code works great.

Custom Filter

angular.module('ui.global')
.filter('objFilter', function () {
  return function (obj, param) {
    var newObj = {};
    if(param){
      for(var key in obj){
        if(key.toLowerCase().includes(param.toLowerCase())){
          newObj[key] = obj[key];
        }
      }
    } else {
      newObj = obj;
    }
    return newObj;
  };
});

Data

$scope.data = {key1:value1, key2:value2, key3:value3};
$scope.filterStr = 'ey';

NG-Repeat

<div ng-repeat="(val, key) in data | objFilter:filterStr"></div>

ng-repeat and filter on value - (key, value) in details

You can try this

<div ng-repeat="project in projectDetails| filter: { projectType : 'Done' }">

Filter ng-repeat with key from parent ng-repeat

That requirement to iterate over object and to filter the child ng-repeat using the key of parent can be achieved by using a custom function which in turn returns the object. Check the sample application created below.

var app = angular.module('sample', []);
app.controller('samplecontroller', function($scope) {
  $scope.filterKey = function(value) {    return {      name: value    };  };
  $scope.categories = {    'John': 'English'  };  $scope.posts = [{    name: 'John',    category: 'General'  }, {    name: 'James',    category: 'Restricted'  }]});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sample">  <div ng-controller="samplecontroller">    <div class="row" ng-repeat="(key, value) in categories">      <h5>{{ value }}</h5>      <ul>        <li ng-repeat="post in $parent.posts | filter: filterKey(key)">{{ post.name }} -- {{ post.category }}</li>      </ul>    </div>  </div>
</body>

ng-repeat :filter by single field

See the example on the filter page. Use an object, and set the color in the color property:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search">

angular ng-repeat filter array by key

Check this it might be your solution - http://jsfiddle.net/Shital_D/vsvxqnq7/4/

After clicking on A, B, C respective array is displayed.

Here is the code:

 angular.module('myApp', [])
     .controller('ExampleController', ['$scope', function($scope) {
         $scope.myFilter = '';
         $scope.allNames = {
             "A": ['name1', 'name2', 'name3'],
             "B": ['name4', 'name5', 'name6'],
             "C": ['name7', 'name8', 'name9']
         };

         $scope.change = function(key) {
             $scope.myFilter = key;
         };

     }]);

HTML -

     <div ng-repeat="(key, value) in allNames" ng-show="myFilter == key">
         <h4>{{ key }}</h4>

        <ul ng-repeat="name in value">
            <li>{{ name }}</li>
        </ul>
    </div>
    <div ng-repeat="(key, value) in allNames" ng-click="change(key)">                 
        {{key}}
    </div>

ng repeat on a array to filter a key on another object to get the associated value and use watch on that value

your filter (at least how you use it in your view) will receive an array with all elements, not just one. So you need to return a complete array

angular.module('myApp').filter('myFilter', function() {
    return function(arrayOfYs, recFromScope) {
      var filtered = [];
      arrayOfYs.forEach(function(y){
        if(!recFromScope.hasOwnProperty(y)) return;
        // if the value in the object is already a number, it is not necessary to use Number. If it is not the case, add it
        filtered.push(scope.rec[y]);
      });
      return filtered;
    }
});

and return the filtered data.

According to your view, you need to use angular filters.

for you input you should use this

<input type="number" id="{{y}}" value={{y}}>

although I would remove that id - ids needs to be unique and probably there are values repeated.

for your calc() function you can use reduce to multiply them

$scope.calc = function(){
    return $scope.filteredItems.reduce(function(prev, current) {
         return prev * current;
    }, 1);
};

and to get a reference to $scope.filteredItems use this in your view

<div ng-repeat="y in (filteredItems = (x | filter:myFilter:rec))">

How to Filter (Key, Value) with Ng-Repeat in Angularjs