Update the input field in the controller to act as a filter supplier

Question

Update the input field in the controller to act as a filter supplier

I currently have an input text field displayed in my view:

<input type="search" placeholder="Search" ng-model="search.$">

This input field acts as a filter for the list of items displayed:

<a ng-repeat="item in items | filter:search" href="#">{{item.name}}</a>

The reason I use search.$ is to enable searching through all properties of the object item.

Now, I am looking to set the input value programmatically from the controller whenever needed:

angular.controller('MyCtrl', function ($scope) {
  var query;
  $scope.updateSearchQuery = function () {
     //query is populated from another source, service, http provider...
     $scope.search = query;
});

However, even though this new query filters the list, it does not display in the input field.

I've attempted using $scope.apply without success:

...
$scope.$apply(function() {
  $scope.search = query;
});
...

UPDATE: Another method I tried was:

$scope.search.$ = query;

You can find a demonstration here: http://plnkr.co/edit/CwzsrJxU9Kb9AARVcENT?p=preview

Can you identify what I might be overlooking or missing?

javascript angularjs

Answer 1

Answer №1

Avoid using a dollar sign ($) as a property name in Angular, as it may get stripped internally by Angular when used in functions like jsonFilter.

If you need to filter an array by all properties, there's no need for a variable starting with '$' in your search object. Here's a corrected version of the example:

PLUNKER

angular.module('MyApp', [])
.controller('MyCtrl', function ($scope) {

  $scope.search = {
    query: ''
  };

  $scope.updateSearchQuery = function (query) {
    $scope.search.query = query;
  }

  $scope.items = [
    {
      id: 'someid',
      name: 'John'
    },
    {
      id: 'someotherid',
      name: 'Smith'
    },
    {
      id: 'anotherid',
      name: 'Patrick'
    }
  ];

});

<body ng-controller="MyCtrl">
  <input type="search" placeholder="Search" ng-model="search.query">
  <button ng-click="search.query=''">Clear</button>
  <a style="display:block" ng-repeat="item in items | filter:{$: search.query}" href="#">
    {{item.id}} | {{item.name}}
  </a>

  <button ng-click="updateSearchQuery('John')">Set Filter to "John"</button>
  <button ng-click="updateSearchQuery('some')">Set Filter to "some"</button>

</body>

Also, note that $scope.search.$ = query; won't work if $scope.search is not initialized beforehand.

Answer 2

Avoid using a dollar sign ($) as a property name in Angular, as it may get stripped internally by Angular when used in functions like jsonFilter.

If you need to filter an array by all properties, there's no need for a variable starting with '$' in your search object. Here's a corrected version of the example:

PLUNKER

angular.module('MyApp', [])
.controller('MyCtrl', function ($scope) {

  $scope.search = {
    query: ''
  };

  $scope.updateSearchQuery = function (query) {
    $scope.search.query = query;
  }

  $scope.items = [
    {
      id: 'someid',
      name: 'John'
    },
    {
      id: 'someotherid',
      name: 'Smith'
    },
    {
      id: 'anotherid',
      name: 'Patrick'
    }
  ];

});

<body ng-controller="MyCtrl">
  <input type="search" placeholder="Search" ng-model="search.query">
  <button ng-click="search.query=''">Clear</button>
  <a style="display:block" ng-repeat="item in items | filter:{$: search.query}" href="#">
    {{item.id}} | {{item.name}}
  </a>

  <button ng-click="updateSearchQuery('John')">Set Filter to "John"</button>
  <button ng-click="updateSearchQuery('some')">Set Filter to "some"</button>

</body>

Also, note that $scope.search.$ = query; won't work if $scope.search is not initialized beforehand.

Update the input field in the controller to act as a filter supplier

Answer №1

Similar questions

Obtain the ID of a YouTube video from an iFrame link using jQuery

Video Playback Issue: Unable to Pause on Final Frame When Looping is Turned On

The content within my "div class=content" is intersecting with the nav-justified section

AngularJS Perspectives: Unveiling the Secrets of Successful Implementation

Only one method failed the CORS Pre-Flight

The issue with CSS filter invert not functioning properly in Mozilla Firefox is causing complications

Fade effect button with jQuery on mouseover

Combining JSON arrays into a single multidimensional array

Displaying selected checkbox values in a URL with parameters using PHP and JavaScript

Rails offers a unique hybrid approach that falls between Ember and traditional JavaScript responses

Locate the index within the array that satisfies a given condition for the value contained in

Having trouble loading a model converted from FBX to JSON using THREE.JSONLoader

Angularfire: how synchronized arrays behave

Is it possible to implement multiple boolean filters in Angular?

Ensuring the capture of all errors within asynchronous express route handlers using async-await syntax

Fetching parent records and their associated children with a single Parse REST API request

Interacting between AngularJS controllers located in separate files creates seamless communication within the application

What is the correct way to update an empty object within the state using setState?

Ensure that the keyboard remains open in an Ionic chat app when a button is clicked

Preserving Selected Dropdown Options After Form Submission