How to filter data based on the scope in AngularJS?

Question

I have the following simplified plunker to demonstrate my issue:

html:

<my-directive ng-repeat="question in questions | filter:{show:true}" data-question="question">    </my-directive>

directive:

app.controller('MainCtrl', function($scope) {
  $scope.questions = [
    {qid:'1', show: true, text:'what is?'},
    {qid:'2', show: false, text:'who is?'},
    {qid:'3', show: true, text:'where is?'}
 ];
});

app.directive('myDirective', function() {
return {
  link: function(scope){
    scope.getShow = function(){
      // some logic to determine show
      // for simlicity , always return true so all questiosn show
      return true;
    };
  },
  restrict: "E",
  scope: {
    question: "="
  },
  template: '<h1>{{question.text}}</h1>'
  };
});

Currently, the filter works based on the 'show' value that comes from the raw data model. but i am trying to clean it from raw data and make it work based on the getShow() logic that is defined at the question's scope level.

Generally, I cannot figure out a way to filter based on fields or functions on the scope, rather than on the data model, and could not find an example of how this could be done.

Please post relevant code in the question itself. Questions should be self contained and only use demo sites as support for what is actually in the question — charlietfl
– charlietfl, Commented Feb 24, 2016 at 23:49

Johnny Kutnowski · Accepted Answer · 2016-02-24 23:55:20Z

2

Within the ng-repeat just set an ng-show equal to the getShow() function and pass along the iterated question.

Get getShow() to check if show is true or false, and return that value.

app.js:

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.questions = [
    {qid:'1', show: true, text:'what is?'},
    {qid:'2', show: false, text:'who is?'},
    {qid:'3', show: true, text:'where is?'}
  ];
});

app.directive('myDirective', function() {
  return {
    link: function(scope){
      scope.getShow = function(question){
        // some logic to determine show
        // for simlicity , always return true so all questiosn show
        return question.show
      };
    },
    restrict: "E",
    scope: {
      question: "="
    },
    template: '<h1>{{question.text}}</h1>'
  };
});

and index.html

<my-directive ng-repeat="question in questions" ng-show="getShow(question)" data-question="question">

And of course, the editable plunker to show.

answered Feb 24, 2016 at 23:55

Johnny Kutnowski

2,4001 gold badge16 silver badges15 bronze badges

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

1 Comment

kob490 Over a year ago

super simple. i probably over-complicated it. thank you.

Collectives™ on Stack Overflow

How to filter data based on the scope in AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related