Question

我需要根据模型中的类别过滤图像。我已经为类别创建了按钮。例如。如果用户按下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>

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;

};





});

Answer 1

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

（i）使用ng-click而不是用angularjs单击

（ii）将ng-repeat放置在外面，以便反映滤镜的变化

（iii）使用Angularjs过滤器，而不是构建自己的过滤器

演示

checkClientTrusted

getAcceptedIssuers

使用按钮单击过滤图像AngularJS

1 个答案: