strict mode filter in angularjs

Question

strict mode filter in angularjs

i just wanted to implement strict filter as a option when user inputs a string with prefix "!" otherwise normal filter

this is what i have done http://plnkr.co/edit/QaroPDzQxeLNjt4vZgRb?p=preview

script:

angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.filter = { friends : [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}] };
     $scope.opt = {
        strict : false,
        val : ''
     };
   }]);

html :

<form name="testForm" ng-controller="ExampleController">
  <input ng-model="opt.val"  placeholder="prefix ! for strict" ng-value="opt.val.substring(1)" class="my-input" />
  <input type="checkbox" style="display:none;" ng-model="opt.strict" ng-bind="opt.strict" ng-checked="opt.val.chatAt(0)==='!'" class="my-input" />
  <table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in filter.friends | filter:opt.val:opt.strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>
</form>

But its not working.

Why?

And how do i make it work?

javascript
angularjs

Answer 1

Try this:

http://plnkr.co/edit/Q69RN3OnwxeSRKdYexEw?p=preview

<form name="testForm" ng-controller="ExampleController">
  <input ng-model="opt.val"  placeholder="prefix ! for strict" class="my-input" />
  <input type="checkbox" style="display:none;" ng-model="opt.strict" ng-bind="opt.strict" ng-checked="opt.val.chatAt(0)==='!'" class="my-input" />
  <table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in filter.friends | filter:(opt.val[0] === '!' ? opt.val.substring(1) : opt.val):(opt.val[0] === '!')">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>
</form>

The filter expression is a bit complicated. It would be better to move thos expressions in the controller, using a intermediate variables that would be updated by a $watch :

http://plnkr.co/edit/6w8mGsVtV50jv6mJdN6X?p=preview

JS:

 $scope.opt = {
    strict : false,
    val: '',
    fullVal : ''
 };
 $scope.$watch('opt.fullVal', function (value) {
     $scope.opt.val = value[0] === '!' ? value.substring(1) : value;
     $scope.opt.strict = value[0] === '!';
 });

HTML:

<form name="testForm" ng-controller="ExampleController">
  <input ng-model="opt.fullVal"  placeholder="prefix ! for strict" class="my-input" />
  <input type="checkbox" style="display:none;" ng-model="opt.strict" ng-bind="opt.strict" ng-checked="opt.val.chatAt(0)==='!'" class="my-input" />
  <table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in filter.friends | filter:opt.val:opt.strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>
</form>