Question

我在这里想要实现的是使用两个下拉列表从json文件获取过滤器结果。实际上我有两个要求。

点击搜索按钮即可获得过滤结果。
更新相同的范围，而不是为搜索结果创建新的范围。（我在我的代码中创建了一个新范围）

我将在这里解释一下我有两个选择选项，一个是主题，另一个是成绩。我希望结果基于所选的选项。例如：如果我选择数学，我应该按照json获得2个结果。此外，我无法理解如何更新视图。

这是代码

JSON：

{
  "data": [
    {
      "id": 1,
      "image": "images/img01.jpg",
      "title": "Addition and subtraction",
      "subject": "Math",
      "grade": 2,
      "noOfVideos": 1,
      "noOfDocuments": 1,
      "noOfQuestions": 2,
      "date": "21 Dec 2015"
    },
    {
      "id": 2,
      "image": "images/img02.jpg",
      "title": "Addition",
      "subject": "Math",
      "grade": 2,
      "noOfVideos": 1,
      "noOfDocuments": 0,
      "noOfQuestions": 1,
      "date": "09 April 2015"
    },
    {
      "id": 3,
      "image": "images/img03.jpg",
      "title": "Learn English",
      "subject": "English",
      "grade": 1,
      "noOfVideos": 0,
      "noOfDocuments": 1,
      "noOfQuestions": 1,
      "date": "28 Oct 2015"
    },
    {
      "id": 4,
      "image": "images/img04.jpg",
      "title": "Lorem Ipsum",
      "subject": "Science",
      "grade": 1,
      "noOfVideos": 1,
      "noOfDocuments": 1,
      "noOfQuestions": 2,
      "date": "11 Jan 2016"
    },
    {
      "id": 5,
      "image": "images/img05.jpg",
      "title": "Computers magic",
      "subject": "Computers",
      "grade": 2,
      "noOfVideos": 1,
      "noOfDocuments": 1,
      "noOfQuestions": 1,
      "date": "01 June 2015"
    }
  ]
}

HTML

<form ng-submit="search()">
            <select class="form-control" ng-model="subject" ng-options="subj.subject for subj in listData">
                <option value="">All Subjects</option>
            </select>
            <select class="form-control" ng-model="grade" ng-options="grd.grade for grd in listData track by grd.id">
                <option value="">All Grades</option>
            </select>
            <!-- <input type="submit"> -->
            <input type="submit" value="search">
            </form>

            <!-- <div class="item" id="item{{ item }}" ng-repeat="item in listData" draggable item="item">{{ item }}</div> -->
        <div class="panel panel-default" ng-repeat="data in searchResults">
          <div class="panel-body">
            <div class="row">
                <div class="col-lg-2">
                    <img ng-show="data.image" src="{{data.image}}" width="120" height="120" />
                </div>
                <div class="col-lg-10 data-content">
                    <h1 id="item{{ item }}" class="item" draggable item="item">{{ data.title }}</h1>
                    <p>{{ data.subject }} Grade: {{ data.grade }}</p>
                    <div class="meta-data">
                        <div class="data-details">
                            {{ data.noOfVideos }} <i class="glyphicon glyphicon-facetime-video"></i> 
                            {{ data.noOfVideos }} <i class="glyphicon glyphicon-list-alt"></i>
                            {{ data.noOfVideos }} Q
                        </div>
                        <div class="date">{{ data.date }}</div>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default" ng-hide="searchResults" ng-repeat="list in listData">
          <div class="panel-body">
            <div class="row">
                <div class="col-lg-2">
                    <img ng-show="list.image" src="{{list.image}}" width="120" height="120" />
                </div>
                <div class="col-lg-10 data-content">
                    <h1 id="item{{ item }}" class="item" draggable item="item">{{ list.title }}</h1>
                    <p>{{ list.subject }} Grade: {{ list.grade }}</p>
                    <div class="meta-data">
                        <div class="data-details">
                            {{ list.noOfVideos }} <i class="glyphicon glyphicon-facetime-video"></i> 
                            {{ list.noOfVideos }} <i class="glyphicon glyphicon-list-alt"></i>
                            {{ list.noOfVideos }} Q
                        </div>
                        <div class="date">{{ list.date }}</div>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="error" ng-show="error">{{ error }}</div>

JS

var app = angular.module('zayaApp', []);

app.factory('mainInfo', function($http) {
    return $http.get('data.json');
})

app.controller('listCtrl', ['$scope', '$http', 'mainInfo', function($scope, $http, mainInfo){

    mainInfo.then(function successCallback(response) {
        $scope.listData = response.data.data;
    }, function errorCallback(response) {
        $scope.error = response.statusText;
    });

    $scope.search = function() {
        var searchResults = {
            subject: $scope.subject,
            grade: $scope.grade
        }

        $scope.searchResults = searchResults;
    }


}]);

另外如果你看到json的等级重复了，我想知道填充选择选项的时候我可以阻止它重复吗？只有1＆amp; 2显示？我可以通过一个下拉选择选项来实现结果但不能链接它。我会创建一个plunkr但它似乎不适用于json文件。

Answer 1

Demo Link

In Angularjs Two way Binding so no need button click. After select dropdown the data will show based on filter...

从angularjs中的多个select中搜索过滤器

1 个答案: