javascript - angularjs ng-repeat在选择选项中过滤多个字段

Question

我在根据选择中的选项进行过滤时遇到问题，然后在 ng-repeat 中使用多个字段进行过滤。如果我选择英语，我必须获得英语电影，如果我选择英语，印地语，我必须同时获得英语和印地语电影。

这是我的代码

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

这是我的 .Js 文件

       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',
    });
});    
}]);

Answer 1

可以避免下拉选择列表中的ng-repeat。您将使用它 ng-option ，这将是一个更好的选择。

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>