CODEWITHSUNDEEP
javascriptangularjsangularjs-filter
cristiancastrodc
cristiancastrodc

Reputation: 157

Angular filter for words inside a phrase

I'm building an AngularJS app. I have this array:

$scope.products = [
  {name: 'cake (just it!)'},
  {name: 'orange cake'},
  {name: 'cheesecake'}
];

then I use ng-repeat for show it.

<li ng-repeat="product in products | filter : { name : word }">
  {{ $product.name }}
</li>

I want to add a filter that will search the beginning of each word inside the phrase, so if I do this:

$scope.word = 'ca';

It will return the following array:

$scope.products = [
  {name: 'cake (just it!)'},
  {name: 'orange cake'}
];

Upvotes: 0

Views: 645

Answers (1)

Sreekanth
Sreekanth

Reputation: 3130

You could do it using a custom filter as mentioned below

var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.products = [{
      name: 'cake (just it!)'
    }, {
      name: 'orange cake'
    }, {
      name: 'cheesecake'
    }, {
      name: 'cheese'
    }, {
      name: 'cheeseca ca'
    }];

  }
]);

app.filter("nameFilter", function() {

  return function(names, contains) {
    return names.filter(function(obj) {
      var expString = '(\\w*\\s|^)' + contains + '';
      var exp = new RegExp(expString, "g");

      if (exp.test(obj.name))
        return name;
    });
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <ul>
      <li ng-repeat="product in products | nameFilter : 'ca' ">
        {{product.name}}
      </li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions