angularjs ng-repeat filter multiple fields in select options

Question

I have problem while filtering based on options in select and then filter in ng-repeat with multiple fields. If i select English Language i have to get English movies and if i select English , Hindi i have to get both English and Hindi Movies together.

Here is my code

    <div class="container languageSelect pull-right col-xs-12" ng-app="myApp" ng-controller="moviesCtrl">
         <select id="selectTitle" ng-options="option for option in languageslist" ng-model="selectedLang.movielanguage" multiple="multiple"></select>
    </div>

    <div class="">
        <figure class="movie" ng-repeat="record in movieslist | filter: selectedLang">
             <a href="#!/movieHomePage" ng-click="showDetails(record)"><img height="300" width="192" class="poster" ng-src='{{record.imageurl}}' alt="{{record.moviename}} Image">
             <figcaption class="moviename">{{record.moviename}}</figcaption></a>
        </figure>
    </div>

Here is my .Js file

       app.controller('moviesCtrl',['$scope', function($scope) {

$scope.selectedLang = { movielanguage:"" };
$scope.recordDetails= undefined;
$scope.languageslist = ["English", "Hindi","Kannada","Malayalam","Tamil", "Telugu"];
$scope.movieslist= [
    {"movieId": "0001", "moviename" : "Aval", "imageurl" : "", "movielanguage":"Tamil" },
    {"movieId": "0002", "moviename" : "Blade Runner", "imageurl" : "", "movielanguage":"English" },
    {"movieId": "0003", "moviename" : "Geostorm", "imageurl" : "", "movielanguage":"English" },
    {"movieId": "0004", "moviename" : "Golmaal Again", "imageurl" : "", "movielanguage":"Hindi" },
    {"movieId": "0005", "moviename" : "ITTEFAQ", "imageurl" : "", "movielanguage":"Hindi" },
    {"movieId": "0006", "moviename" : "Mersal", "imageurl" : "", "movielanguage":"tamil" },
    {"movieId": "0011", "moviename" : "PSV Garuda Vega", "imageurl" : "", "movielanguage":"telugu" },
    {"movieId": "0011", "moviename" : "Raja The Great", "imageurl" : "", "movielanguage":"telugu" },
    {"movieId": "0007", "moviename" : "Secret Superstar", "imageurl" : "", "movielanguage":"hindi" },
    {"movieId": "0008", "moviename" : "Solo", "imageurl" : "", "movielanguage":"malayalam" },
    {"movieId": "0009", "moviename" : "The Foreigner", "imageurl" : "", "movielanguage":"english" },
    {"movieId": "0010", "moviename" : "Thor Ragnarok", "imageurl" : "", "movielanguage":"english" },
    {"movieId": "0011", "moviename" : "Villain", "imageurl" : "", "movielanguage":"malayalam" }
]

$scope.showDetails = function (record) {
  $scope.model.recordDetails = record;
};

$(function () {
    $('#selectTitle').multiselect({
        width: 200,
        nonSelectedText: 'Select Language',
        includeSelectAllOption: true,
        nSelectedText: 'Languages Selected',
    });
});    
}]);

i haven't given any values as to it. Initiated with Empty array — Naga Gopi Nallagonda
– Naga Gopi Nallagonda, Commented Nov 21, 2017 at 10:50
Naga, if you don't mind a suggestion: As your english is not native (and so are many others SO users, including me), you can improve expected answers by including in the question a example of your expected result in the HTML. — Malavos
– Malavos, Commented Nov 21, 2017 at 10:54
Where you are struggling now.whether multiple drop-down selection or filter — Sathiyaraj
– Sathiyaraj, Commented Nov 21, 2017 at 10:55
If i don't use multiple attribute in select tag, I can filter for single option. But when i insert multiple attribute i am having issues — Naga Gopi Nallagonda
– Naga Gopi Nallagonda, Commented Nov 21, 2017 at 11:05

Sathiyaraj · Accepted Answer · 2017-11-21 10:51:57Z

1

You can avoid ng-repeat in the drop-down selection list. You will use it ng-option that is will be a better one.

record in movieslist | filter: {movielanguage: "Tamil"}

Your code
record in movieslist | filter: {movielanguage: selectedLang.movielanguage}


<div class="">
        <figure class="movie" ng-repeat="record in movieslist | filter: {movielanguage: selectedLang}">
             <a href="#!/movieHomePage" ng-click="showDetails(record)"><img height="300" width="192" class="poster" ng-src='{{record.imageurl}}' alt="{{record.moviename}} Image">
             <figcaption class="moviename">{{record.moviename}}</figcaption></a>
        </figure>
    </div>

answered Nov 21, 2017 at 10:51

Sathiyaraj

3433 silver badges12 bronze badges

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

3 Comments

Naga Gopi Nallagonda Over a year ago

I'm using ng-options only. If i don't use multiple attribute in select tag, I can filter for single option. But when i insert multiple attribute i am having issues

Naga Gopi Nallagonda Over a year ago

record in movieslist | filter: {movielanguage: "Tamil"} but i want multiple selection like Tamil, English and Hindi when checked

Sathiyaraj Over a year ago

Ok. You can write a custom filter logic otherwise not yet to get the value.

Collectives™ on Stack Overflow

angularjs ng-repeat filter multiple fields in select options

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related