Angularjs - Placeholder for Empty Result from Filter

AngularJS - placeholder for empty result from filter

A tweak on the approach that only requires you to specify the filter once:

  <li ng-repeat="bar in filteredBars = (bars | filter:barFilter)">{{bar.name}}</li>
</ul>
<p ng-hide="filteredBars.length">Nothing here!</p>

Fiddle

Show message empty result after filter data angularjs

As of angular 1.4 you can create an alias for filtered array using as aliasName that will be added to current scope. It is important that as comes after all filters in the expression

<div dir-paginate="partners in partnersData|orderBy:...|...| lastFilter as filteredArray">

</div>

<!-- Outside paginate directive -->
<div ng-if="!filteredArray.length">No results</div>

AngularJS - Count results after using both filter and groupBy

You can do something similar:

<ul ng-repeat="(key, value) in (filteredPlayers = (players | filter:search) | groupBy: 'team')">
    ..
</ul>

<h1>Length: {{ filteredPlayers.length }}</h1>

AngularJs Filter: Nothing should be displayed until i start a search

You can hide the table of data by watching the value of your search. You can use Angular's ng-show directive to display / hide your table.

ng-show="query[queryBy] !== undefined && query[queryBy] !== ''"

This works but it's not the cleanest approach. You could instead write a function in your controller that returns a boolean to determine if the search is empty or not. For example

ng-show="isSearchEmpty()"

http://plnkr.co/edit/5Wux1qbM1mwPNdA1sgiZ?p=preview

Here's an example of the first approach.

Empty the placeholder when using ng-model

You have a variable in scope, called hello. You have an <input> element which is bound to the same variable. Inevitably, the element will have the same value of that variable.

As I understand from your comments, you wish the input element not to be bound to that variable. In this case, there are several alternatives. One for example is to have a separate variable in your scope.

Then you can use ngChange to update the first variable only if the input is changed, and thus maintain the initial value of it.

var app = angular.module('example', []);
app.controller('MainCtrl', function($scope) {  $scope.hello = 'hello';  $scope.field = '';  $scope.change = function() {    $scope.hello = $scope.field;  };});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><body  ng-app="example" ng-controller="MainCtrl">    <input type="text" ng-model="hello" ng-change="change()"></body>

Filtering ng-repeat when object property is empty with AngularJS

You can create custom filter please see demo below

app.filter('emptyString', [
  function() {
    return function(input, param) {
      if (!param) return input

      var ret = [];
      if (!angular.isDefined(param)) param = true;

      if (param) {
        angular.forEach(input, function(v) {
          if (angular.isDefined(v.comment) && v.comment) {
            v.comment = v.comment.replace(/^\s*/g, '');
            ret.push(v);
          }

        });
      }

      return ret;
    };
  }
])

var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
  $scope.recordlist = [{      time: "10/11/2014",      comment: "super"    }, {      time: "10/11/20004",      comment: ""    }, {      time: "10/11/2005",      comment: ""    }, {      time: "11/1/2014",      comment: "that was ok"    }

  ];

});
app.filter('emptyString', [  function() {    return function(input, param) {      if (!param) return input
      var ret = [];      if (!angular.isDefined(param)) param = true;

      if (param) {        angular.forEach(input, function(v) {          if (angular.isDefined(v.comment) && v.comment) {            v.comment = v.comment.replace(/^\s*/g, '');            ret.push(v);          }
        });      }

      return ret;    };  }])

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

<div ng-app="app">  <div ng-controller="homeCtrl">    <form role="form">      <div class="form-group col-md-3">        <input type='daterange' placeholder="Date range" class="form-control" format="DD/MM/YYYY" ng-model="dates" ranges="ranges" />      </div>
      <div class="form-group col-md-1">        <input class="form-control" placeholder="Time" ng-model="search.time">      </div>
      <div class="form-group col-md-1">        <input class="form-control" placeholder="Car" ng-model="search.car">      </div>
      <div class="form-group col-md-2">        <input class="form-control" placeholder="Driver" ng-model="search.driver">      </div>
      <div class="form-group col-md-2">        <input class="form-control" placeholder="From" ng-model="search.from">      </div>
      <div class="form-group col-md-2">        <input class="form-control" placeholder="Destination" ng-model="search.destination">      </div>
      <div class="form-group col-md-1">        <input class="form-control" placeholder="Pax" ng-model="search.pax">      </div>
      <div class="col-md-1">        <div class="checkbox">          <label>            <input type="checkbox" ng-model="search.cancelled" ng-change="search.cancelled = search.cancelled ? true : undefined">Cancelled          </label>        </div>      </div>
      <div class="col-md-2">        <div class="checkbox">          <label>            <input type="checkbox" ng-model="search.comment">Commented records          </label>        </div>      </div>
    </form>    <div class="container">      <div class="row " ng-repeat="record in filteredRecords = (recordlist |  emptyString : search.comment   )">        <div class="col-xs-12" <span class="label">{{record.time}} <span> <strong>{{record.comment}}</strong></p> </div>    </div>    </div>  </div>

Filter does not show a message instead of a table if the filtering returns empty result

Try: "rows in $ctrl.myData | filter: {Type: $ctrl.type} as filtered track by $index "
and under your table <div ng-if="!filtered.length">No results</div>
https://plnkr.co/edit/diNlE0lS8eFttvgBUHug?p=preview

Angularjs - Placeholder for Empty Result from Filter