AngularJS Filter issue: Compare only part of string (substring)

Question

Issue happens when i filtered the data using the string "home" and "home 123", if i filter for "home" then content related to "home 123" also selected. that means Boolean return true even for "home 123" if I filter for "home" that is substring. http://jsbin.com/jolik/1/edit

But if i use filter with strings which are not related "home" and "product" i got the exact result intended. see this JS Bin demo http://jsbin.com/rusab/1/edit

Please help in this issue. Thanks in advance for any help.

Index.html:

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

  </head>

<body ng-controller="MyApp">
  <select ng-model="keyToDisplay" ng-options="key as key.key for key in keys"></select>
  <span>{{keyToDisplay.key}}</span>


  <div ng-repeat="item in data | filter:{'key':keyToDisplay.key}">
    <h3>{{item.key}}</h3>
    <p>{{item.value}}</p>
  </div>
  <hr />

</body>
</html>

working Code : app.js

var app = angular.module('myapp', []);

app.controller('MyApp', ['$scope', function($scope) {
  $scope.data = [
    {key:"home",value:"hk1"},
    {key:"home",value:"hk2"},
    {key:"home",value:"hk3"},
    {key:"home",value:"hk4"},
    {key:"product",value:"pk1"},
    {key:"product",value:"pk2"},
    {key:"product",value:"pk3"},
    {key:"product",value:"pk4"},
    {key:"service",value:"sk1"},
    {key:"service",value:"hk2"},
    {key:"service",value:"hk3"},
    {key:"service",value:"hk4"}
  ];

  $scope.datafiltered = _.groupBy($scope.data, 'key');

  $scope.keys = _.unique($scope.data, 'key');

  $scope.keyToDisplay = $scope.keys[0];
}]);

Issue Code : app.js

var app = angular.module('myapp', []);

app.controller('MyApp', ['$scope', function($scope) {
  $scope.data = [
    {key:"home",value:"hk1"},
    {key:"home",value:"hk2"},
    {key:"home",value:"hk3"},
    {key:"home",value:"hk4"},
    {key:"home 123",value:"pk1"},
    {key:"home 123",value:"pk2"},
    {key:"home 123",value:"pk3"},
    {key:"home 123",value:"pk4"},
    {key:"service",value:"sk1"},
    {key:"service",value:"hk2"},
    {key:"service",value:"hk3"},
    {key:"service",value:"hk4"}
  ];

  $scope.datafiltered = _.groupBy($scope.data, 'key');

  $scope.keys = _.unique($scope.data, 'key');

  $scope.keyToDisplay = $scope.keys[0];
}]);

+1 for key as key.key for key in keys ;)

angabriel
– angabriel

2014-04-08 10:15:45 +00:00
Commented Apr 8, 2014 at 10:15 — angabriel
– angabriel, Commented Apr 8, 2014 at 10:15

Boris Ivanov · Accepted Answer · 2014-04-08 10:23:13Z

2

for exact equivalence use extended filter.

Look at true after filter argument.

  <div ng-repeat="item in data | filter:keyToDisplay.key:true">
    <h3>{{item.key}}</h3>
    <p>{{item.value}}</p>
  </div>
  <hr />

more details at filter docs

answered Apr 8, 2014 at 10:23

Boris Ivanov

4,2541 gold badge35 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Filter issue: Compare only part of string (substring)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related