AngularJS ng-repeat filter fails to function with changing field names dynamically

Question

AngularJS ng-repeat filter fails to function with changing field names dynamically

Here is a code snippet I am working with:

<input type="text" ng-model="filteredText">
<ul>
    <li ng-repeat="item in data | filter: {Name : filteredText}">

    </li>
</ul>

Initially, when the Name property is static, everything functions correctly. However, I now require the ability to filter by a dynamic field. For example:

<ul>
    <li ng-repeat="item in data | filter: {propertyName: filteredText}">

    </li>
</ul>

In this scenario, the propertyName is dynamic and is sourced from the $scope. Unfortunately, using this dynamic value in the filter directive does not yield the desired result.

javascript angularjs angularjs-scope angular-filters

Answer 1

Answer №1

Upon carefully reviewing the documentation, it appears that an alternative approach must be taken.

<input ng-show="propertyFilter == 'Name'" 
       type="text"
       ng-model="filteredText[propertyName]" />

<ul>
    <li ng-repeat="item in data | filter: filteredText">

    </li>
</ul>

Answer 2

Upon carefully reviewing the documentation, it appears that an alternative approach must be taken.

<input ng-show="propertyFilter == 'Name'" 
       type="text"
       ng-model="filteredText[propertyName]" />

<ul>
    <li ng-repeat="item in data | filter: filteredText">

    </li>
</ul>

Answer 3

Answer №2

Here is a possible solution that you can use: sample code

<div ng-controller="MyCtrl">
   <div ng-repeat="line in lines | filter:custom()">
      <p>
      {{line.Title}}
      </p>
    </div>
</div>

var myApp = angular.module('myApp', [])
function MyCtrl($scope) {
    $scope.filterText = 'object';
    $scope.fieldName = 'Title'

    $scope.custom = function(){
      var obj = {};
      obj[$scope.fieldName] = $scope.filterText;

        return obj;
    }

    $scope.lines = [
        {Title: 'First Item', value: 20},
      {Title: 'Second Item', value: 23}
    ];
}

Answer 4

Here is a possible solution that you can use: sample code

<div ng-controller="MyCtrl">
   <div ng-repeat="line in lines | filter:custom()">
      <p>
      {{line.Title}}
      </p>
    </div>
</div>

var myApp = angular.module('myApp', [])
function MyCtrl($scope) {
    $scope.filterText = 'object';
    $scope.fieldName = 'Title'

    $scope.custom = function(){
      var obj = {};
      obj[$scope.fieldName] = $scope.filterText;

        return obj;
    }

    $scope.lines = [
        {Title: 'First Item', value: 20},
      {Title: 'Second Item', value: 23}
    ];
}

AngularJS ng-repeat filter fails to function with changing field names dynamically

Answer №1

Answer №2

Similar questions

Bringing in an external .js file into nuxt.config.js

Incorporating CSS Styles in EJS

Tips for utilizing the useContext hook in Next.js

Attempting to dynamically update the image source from an array when a click event occurs in a React component

How to reference a nested closure function in Javascript without relying on the 'this' keyword

Improving observables in Angular after triggering a resolver

The functionality of triggers is not applicable to content that is dynamically loaded through ajax requests

Steps for replacing $httpProvider in a service when there is already a defined $httpProvider

What advantages can be gained by opting for more precise module imports?

Storing newly generated rows using PHP and JavaScript

Struggling with integrating Meteor.wrapAsync with the mailchimp-api-v3

Rewriting a JSON tree structure in NodeJS

Pass PHP date to JavaScript and increase its value

Navigating through pages using Jquery's show and hide functionality

Revolutionizing the Industry: Discover the Power of Dynamic Models, Stores, and Views for

How can you make a checkbox function like a select in AngularJS?

Adjust ThreeJS camera zoom to match the size of a specific HTML element

Adding a stylesheet dynamically to the <head> tag using $routeProvider in AngularJS

Create a new object in Three.js every x seconds and continuously move each object forward in the Z-axis direction

Transform JSON array containing identical key-value pairs