Refine Text search in angular js

Question

I am new to angularjs.

Here is my code :

 $scope.styles = [{"name":"walking"},{"name":"Food"},{"name":"culture"}]

I created checkboxlist

<div ng-repeat="style in styles">
 <input type="checkbox"> {{style}}
</div>

I am getting the Tours packages with style value eg: walking ,food

$scope.tours = [{"Tourname":"sky walk","style:walking "},{"Tourname":"Accra markets","style":"food,walking"}]

my objective : when i click a style in the checkbox , all the tours with the style only displayed.

any help or sample links ?

@nehemiahjacob sorry i am not familiar in fiddle.

ramamoorthy_villi
– ramamoorthy_villi

2014-06-06 04:57:50 +00:00
Commented Jun 6, 2014 at 4:57 — ramamoorthy_villi
– ramamoorthy_villi, Commented Jun 6, 2014 at 4:57

Jayantha Lal Sirisena · Accepted Answer · 2014-06-06 05:21:19Z

3

May be you could do like this,You can use the ng-show directive with a function to check the style is selected,

function mainController($scope){
    $scope.styles = [{"name":"walking"},{"name":"Food"},{"name":"culture"}];
    $scope.tours = [{"Tourname":"sky walk",style:"walking "},{"Tourname":"Accra markets","style":"food,walking"}];

    $scope.selected=function(tour){
        for (var i = 0; i < $scope.styles.length; i++) {

            var style=$scope.styles[i];
            if(style.selected=="true" && tour.style.indexOf(style.name)>=0){
                return true;

            }
        }
        return false;
    }
}

And the HTML,

 <div ng-repeat="style in styles">
            <input ng-model="style.selected" ng-true-value="true" ng-false-value="false" type="checkbox"/>{{style}}
        </div>
        <h1>tours</h1>
        <div ng-repeat="tour in tours" ng-show="selected(tour)">
            <input type="checkbox"/>{{tour}}
        </div>

Here is the Plunker

edited Jun 6, 2014 at 5:21

answered Jun 6, 2014 at 5:10

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

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

1 Comment

Marc Kline Over a year ago

This works (and that's what's most important), but this is probably best implemented in Angular as a filter on ng-repeat directly. One benefit is that the DOM wouldn't be polluted with hidden elements.

Marc Kline · Accepted Answer · 2014-06-06 10:26:04Z

2

A filter is most appropriate for filtering data from a set. You can use a filter filter with your own scope predicate function:

Predicate in controller:

$scope.hasStyle = function(item){
    return $scope.styles.some(function(style){
      if(style.selected && item.style.indexOf(style.name) > -1) {
        return true;
      }
    })
  }

View:

<div ng-repeat="style in styles">
  <input type="checkbox" ng-model="style.selected">{{style.name}}
</div>
<div ng-repeat="tour in tours | filter: hasStyle">{{tour | json}}</div>

Demo

edited Jun 6, 2014 at 10:26

answered Jun 6, 2014 at 10:18

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

Collectives™ on Stack Overflow

Refine Text search in angular js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related