One way to filter using a single array

Question

One way to filter using a single array

Currently testing some angularJS with this particular example

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_filter

<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>

Is there a way to apply filtering for multiple selections? For instance, I have a model containing all car information. The user is able to select a list of IDs int[] SelectedCars from a tree list.

My intention is to achieve something similar to the following:

<ul>
  <li ng-repeat="x in names | filter : SelectedCars[]">
    {{ x }}
  </li>
</ul>

javascript angularjs angularjs-filter

Answer 1

Answer №1

Check out this JSFiddle

Everything seems to be functioning properly now.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
    <li ng-repeat="x in names | filter : 'i'">
        {{ x }}
    </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
                'Jani',
                'Carl',
                'Margareth',
                'Hege',
                'Joe',
                'Gustav',
                'Birgit',
                'Mary',
                'Kai'
        ];
        $scope.selectedCars = [1, 2, 5];
        $scope.carsToDisplay = [];
        for (var i = 0; i < $scope.selectedCars.length; i++) {
                $scope.carsToDisplay.push($scope.names[$scope.selectedCars[i]]);
        }
        var p = document.getElementById('p');
        p.innerHTML = $scope.carsToDisplay;
});
</script>

<p id="p">This code example showcases how to display only the names that contain the letter "i".</p>

</body>
</html>

Answer 2

Check out this JSFiddle

Everything seems to be functioning properly now.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
    <li ng-repeat="x in names | filter : 'i'">
        {{ x }}
    </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
                'Jani',
                'Carl',
                'Margareth',
                'Hege',
                'Joe',
                'Gustav',
                'Birgit',
                'Mary',
                'Kai'
        ];
        $scope.selectedCars = [1, 2, 5];
        $scope.carsToDisplay = [];
        for (var i = 0; i < $scope.selectedCars.length; i++) {
                $scope.carsToDisplay.push($scope.names[$scope.selectedCars[i]]);
        }
        var p = document.getElementById('p');
        p.innerHTML = $scope.carsToDisplay;
});
</script>

<p id="p">This code example showcases how to display only the names that contain the letter "i".</p>

</body>
</html>

One way to filter using a single array

Answer №1

Similar questions

leveraging an AngularJS controller to handle a service promise within the view

Find out if OpenAI's chat completion feature will trigger a function call or generate a message

Creating a stand-alone JavaScript file for generating Bootstrap-vue Toast notifications

Smooth scrolling feature for Wordpress websites

Error message "e.nodename undefined when set to setTimeout" was encountered

What is the best way to implement a CSS transition for styles that are dynamically created by React?

Hiding Div with JavaScript (Quick and Easy)

What is the best way to trigger an angular controller function when the ons-switch is toggled?

What is the best way to save only the time in MySQL using Sequelize?

Tips for displaying errors in React applications

What is the best way to clear an arrayList when an error occurs in the ajax response?

Incorporate a personalized JavaScript code segment during the Vue build process

Change the space character ' ' to '-' when a key is lifted

What is the method for exporting data directly from an EC2 instance to a file, such as a .txt or .json file?

Having trouble with Angular ngRoute functionality?

Creating a module within a component in angular - step by step guide

Utilizing Angular to make API requests and handle promises

Form with missing input fields submits nothing to the server

Tips for adjusting the minimum attribute within an input field with jQuery

Create a dynamic slideshow using a bootstrap carousel in conjunction with the powerful php glob() function