Enhance text search functionality using AngularJS

Question

Enhance text search functionality using AngularJS

Just starting to learn angularjs.

Below is the code I've written:

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

I have created a checkbox list

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

Currently, I am retrieving Tours packages with style values such as: walking ,food

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

The goal here is that when a style in the checkbox is clicked, only the tours with that specific style should be displayed.

Would appreciate any help or sample references!

javascript angularjs

Answer 1

Answer №1

Consider trying this approach: Utilize the ng-show directive along with a function to verify if a style has been 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;
    }
}

Then, in 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>

For live demonstration, you can check out the Plunker link here.

Answer 2

Consider trying this approach: Utilize the ng-show directive along with a function to verify if a style has been 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;
    }
}

Then, in 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>

For live demonstration, you can check out the Plunker link here.

Answer 3

Answer №2

Utilizing a filter is the best method for extracting specific data from a collection. To achieve this, you can implement a custom scope predicate function within a filter:

Scope Predicate Function:

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

Implementation in 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>

See Demo

Answer 4

Utilizing a filter is the best method for extracting specific data from a collection. To achieve this, you can implement a custom scope predicate function within a filter:

Scope Predicate Function:

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

Implementation in 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>

See Demo

Enhance text search functionality using AngularJS

Answer №1

Answer №2

Similar questions

Strange sequence of results coming from Vue.js

Can you define the "tab location" in an HTML document using React?

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

What is the best way to send information from ng-repeat items in one view to another view when both views are controlled by a single controller?

Show labels for data on a circular graph using angular-chart.js

What method can be used to keep Chromium open while using Puppeteer?

Comparing and highlighting words in strings using JavaScript

Ways to use string functions in JavaScript to substitute with /

Having trouble with JavaScript canvas drawImage function not functioning correctly

How do I customize the appearance of console.log messages stored in a string variable?

What is Angular's approach to managing the @ symbol in view paths?

Verifying username using an Ajax call

The Jquery tooltip feature consistently displays the title of the header as the tooltip

Having trouble implementing a cookie on the second domain using the first domain. Can't seem to get it to work properly

Issue with preventdefault() function in Internet Explorer 8

Leverage JSON data from an API within JavaScript, sourced and accessed through PHP

Tips for uploading files to C# MVC model with the angular file uploader

How can you conceal an element once the ngHide animation has completed in Angular's ngAnimate?

Personalized AngularJS required text

Using JavaScript variables within an HTML tag