使用按钮点击过滤图像AngularJS答案

【问题标题】：Filtering Images with Button Clicks AngularJS使用按钮点击过滤图像AngularJS
【发布时间】：2018-09-25 01:27:57
【问题描述】：

我需要根据模型中的类别过滤图像。我已经为该类别创建了按钮。例如。如果用户按下 Lake Pics 按钮，希望它过滤模型中所有类别为“湖”的图像，或者如果选择了 Family Pics，过滤所有类别为“family”的图像等。所有的例子我已经发现和研究在 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>

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

};





});

【问题讨论】：

标签： angularjs image filter model angularjs-ng-click

【解决方案1】：

您的代码中几乎没有错误，

(i) 使用 ng-click 而不是使用 angularjs 进行点击

(ii)将 ng-repeat 放在外面，以便反映过滤器的变化

(iii) 使用 Angularjs 过滤器而不是自己构建

演示

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

【讨论】：

我包含了你的函数声明。那么现在你能告诉我我在html中的按钮上添加了什么吗？我尝试了的几种变体，但它说 selectCategory() 未定义...？
太棒了！唯一不起作用的是全选。我将其更改为“vm.selectCategory('')”，但它会清除所有图片。