CODEWITHSUNDEEP
javascriptangularjs
ramamoorthy_villi
ramamoorthy_villi

Reputation: 2055

Refine Text search in angular js

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 ?

Upvotes: 0

Views: 369

Answers (2)

Marc Kline
Marc Kline

Reputation: 9409

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

Upvotes: 2

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21376

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

Upvotes: 3

Related Questions