Фильтрация изображений с помощью нажатий кнопок AngularJS - PullRequest
Новая
       8

Фильтрация изображений с помощью нажатий кнопок AngularJS

0 голосов
/ 25 сентября 2018

Мне нужно отфильтровать изображения по категории в модели.Я создал кнопки для категории.Например, если пользователь нажимает кнопку с изображением озера, он хочет отфильтровать все изображения с категорией «озеро» в модели или, если выбрано семейное изображение, отфильтровать все изображения с категорией «семейство» и т. Д. Все примеры I 'Мы нашли и исследовали статические ссылки на изображения в HTML.Но я хотел бы извлечь все из модели.Как лучше всего подойти к этой программе?

<!DOCTYPE html>
    <html ng-app = "myApp">
    <head>
        <meta charset="UTF-8">
        <title>AngularJS Picture Gallery</title>
        <link rel="stylesheet" type="text/css" 
href="bootstrap.min.css">
        <link rel ="stylesheet" type "text/css" href ="clicker.css">

   <script type = "text/javascript" src="Libs/angular.js"> </script>

        <script type = "text/javascript" src="js/gallery.js"></script>

        <div ng-controller = "MainController as vm">

     <div class = "container">
      <div class = "row">
        <div class = "col-md-12" id ="myBtnContainer">
        <button class = "btn active" onclick = 
           "filterSelection('all')"> Show all </button>
        <button class = "btn active" onclick = 
           "filterSelection('lake')"> Lake Pics </button>
        <button class = "btn active" onclick = 
           "filterSelection('family')"> Family Pics </button>
        <button class = "btn active" onclick = 
        "filterSelection('kids')"> Kid Pics </button>

      </div>
     </div>

      <div class = "row">
        <div class = "col-md-12">
         <div class = "thumbnail">
       </div>
      </div>

      <div ng-repeat = "image in vm.options.imageList">
      <img ng-src="{{image.images}}" hspace ="15" vspace ="10">


      </div>


          </div>
       </div>
    </div>
    </div>

    </body>
    </html>

JS 

"use strict";


angular.module('myApp',[]);

angular.module('myApp').controller('MainController', function($scope) {
  var vm = this;


vm.selectCategory=selectCategory;

vm.options = {

   imageList:[

   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg',
    caption: 'sleepy',
    category: 'family'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg',
    caption:  'sleepy',
    category: 'family',
  },


   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg',
    caption: 'cuddly',
    category: 'family'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg',
    caption: 'sleepy',
    category: 'lake'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg',
    caption:  'sleepy',
    category: 'lake'
  }

],
};




function selectCategory(pos) {
  vm.selectedCategory = pos;

};





});

1 Ответ

0 голосов
/ 25 сентября 2018

В вашем коде есть несколько ошибок,

(i) Используйте ng-click вместо click с angularjs

(ii) Поместите ng-repeat снаружи так, чтобы изменения с фильтром получилиотражение

(iii) Используйте фильтр Angularjs вместо создания собственного

DEMO 

"use strict";


angular.module('myApp',[]);

angular.module('myApp').controller('MainController', function($scope) {
 var vm = this;
vm.selectCategory=selectCategory;

vm.options = {

   imageList:[

   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg',
    caption: 'sleepy',
    category: 'family'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg',
    caption:  'sleepy',
    category: 'family',
  },


   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg',
    caption: 'cuddly',
    category: 'family'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg',
    caption: 'sleepy',
    category: 'lake'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg',
    caption:  'sleepy',
    category: 'lake'
  }

],
};


 

function selectCategory(pos) {
  vm.selectedCategory = pos;

};





});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
    <html ng-app = "myApp">
    <head>
        <meta charset="UTF-8">
        <title>AngularJS Picture Gallery</title>
        <div ng-controller = "MainController as vm">
        <div class = "container">
        <div class = "row">
        <div class = "col-md-12" id ="myBtnContainer">
        <button class = "btn active" ng-click = 
           "vm.selectCategory('all')"> Show all </button>
        <button class = "btn active" ng-click = 
           "vm.selectCategory('lake')"> Lake Pics </button>
        <button class = "btn active" ng-click = 
           "vm.selectCategory('family')"> Family Pics </button>
        <button class = "btn active" ng-click = 
        "vm.selectCategory('kids')"> Kid Pics </button>
      </div>
      <div class = "row">
        <div class = "col-md-12">
         <div class = "thumbnail">
       </div>
      </div>
      <div ng-repeat = "image in vm.options.imageList | filter: { category: vm.selectedCategory }">
      <img ng-src="{{image.images}}" hspace ="15" vspace ="10">
    </div>
     </div>
     </div>
   </div>
    </body>
    </html>
...