文章/答案/技术大牛

发布

社区首页 >问答首页 >点击AngularJS按钮过滤图像

问点击AngularJS按钮过滤图像
EN

Stack Overflow用户

提问于 2018-09-25 01:27:57

回答 1查看 810关注 0票数 0

我需要根据模型中的类别过滤图像。我为这个类别创建了按钮。例如，如果用户按了Lake按钮，希望它能够过滤模型中的类别‘links’的所有图像，或者如果选择了家庭图片，则使用类别‘家族’等过滤所有图像。我发现和研究过的所有示例都在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

Stack Overflow用户

回答已采纳

发布于 2018-09-25 01:32:35

代码中很少有错误，

(i)使用ng-单击而不是用angularjs单击

(Ii)将ng-重复放置在外面，以使带有过滤器的更改得到反映。

(3)使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52489369

复制

相似问题

问点击AngularJS按钮过滤图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问点击AngularJS按钮过滤图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问点击AngularJS按钮过滤图像
EN