将列表项与$ scope变量进行比较

我是JavaScript新手，并且很难用它来操纵我的html元素。

现在我在我的JavaScript文件中有一个图像数组。

我想只显示我的IMG的ID，如果它匹配导航栏的列表项。

这里是我的JavaScript文件：

(function() { 

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

app.controller('ContentController',function($scope) { 

    $scope.img=[ 
       {id:'TOPS',source:'images/top1.jpg'}, 
       {id:'TOPS',source:'images/top2.jpg'}, 
       {id:'TOPS',source:'images/top3.jpg'}, 
       {id:'TOPS',source:'images/top4.jpg'}, 
       {id:'SHOES',source:'images/shoe1.jpg'}, 
       {id:'SHOES',source:'images/shoe2.jpg'}, 
       {id:'SHOES',source:'images/shoe3.jpg'}, 
       {id:'SHOES',source:'images/shoe4.jpg'} 
    ]; 

}); 

})();

这里是我的html文件：

<!DOCTYPE html> 
<html lang="en" ng-app="myContent"> 
<head> 
<meta charset="UTF-8"> 
<title>ShopME Tops</title> 
<link rel="stylesheet" type="text/css" href="mystyle.css"/> 
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css"> 
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js 
"></script> 
<script type="text/javascript" src="myscript.js"></script> 
</head> 

<body> 

<header> 

<div class="header-inner2"> 
    <nav> 
     <ul class="center"> 
      <li><a href="tops.html">SWIMWEAR</a></li> 
      <li><a href="tops.html">TOPS</a></li> 
      <li><a href="tops.html">BOTTOMS</a></li> 
      <li><a href="tops.html">DRESSES</a></li> 
      <li><a href="tops.html">SHOES</a></li> 
      <li><a href="tops.html">ACCESSORIES</a></li> 
     </ul> 
     </nav> 
</div> 
</header> 


<!-- Container for grid layout --> 
<div class="container" ng-controller="ContentController"> 
    <div class="row"> 
     <div class="col" ng-repeat="x in img"> 
      <a ng-href="{{x.link}}" target="_blank"> 
      <img class="img-responsive1" ng-src="{{x.source}}" alt="#"> 
      </a> 
     </div> 
    </div> 
</div>

反正是有名单的项目比作img.id？

来源

2017-07-16 Cameron

您可以将价值传递给一个函数，并使用过滤器来过滤值，比如下面

$scope.getData = function(value){ 
    $scope.filtered = $scope.img.filter(test=>test.id == value); 
}

DEMO

(function() { 
 

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

 
app.controller('ContentController',function($scope) { 
 
    $scope.filteted = []; 
 
    $scope.img=[ 
 
       {id:'TOPS',source:'images/top1.jpg'}, 
 
       {id:'TOPS',source:'images/top2.jpg'}, 
 
       {id:'TOPS',source:'images/top3.jpg'}, 
 
       {id:'TOPS',source:'images/top4.jpg'}, 
 
       {id:'SHOES',source:'images/shoe1.jpg'}, 
 
       {id:'SHOES',source:'images/shoe2.jpg'}, 
 
       {id:'SHOES',source:'images/shoe3.jpg'}, 
 
       {id:'SHOES',source:'images/shoe4.jpg'} 
 
    ]; 
 
    $scope.getData = function(value){ 
 
     $scope.filtered = $scope.img.filter(test=>test.id == value); 
 
     
 
    } 
 
}); 
 
})();

<!DOCTYPE html> 
 
<html lang="en" ng-app="myContent"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>ShopME Tops</title> 
 
<link rel="stylesheet" type="text/css" href="mystyle.css"/> 
 
<link rel="stylesheet" 
 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
 
awesome/4.7.0/css/font-awesome.min.css"> 
 
<script type="text/javascript" 
 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js 
 
"></script> 
 
<script type="text/javascript" src="myscript.js"></script> 
 
</head> 
 
<body> 
 
    
 
<div ng-controller="ContentController" class="header-inner2"> 
 
    <nav> 
 
     <ul class="center"> 
 
      <li><a ng-click="getData('SWIMWEAR')" >SWIMWEAR</a></li> 
 
      <li><a ng-click="getData('TOPS')">TOPS</a></li> 
 
      <li><a ng-click="getData('BOTTOMS')">BOTTOMS</a></li> 
 
      <li><a ng-click="getData('DRESSES')">DRESSES</a></li> 
 
      <li><a ng-click="getData('SHOES')">SHOES</a></li> 
 
      <li><a ng-click="getData('ACCESSORIES')">ACCESSORIES</a></li> 
 
     </ul> 
 
     </nav> 
 

 
    
 
<!-- Container for grid layout --> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col" ng-repeat="x in filtered"> 
 
      <a ng-href="{{x.link}}" target="_blank"> 
 
      <img class="img-responsive1" ng-src="{{x.source}}" alt="#"> 
 
      </a> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

来源

2017-07-16 17:29:00 Sajeetharan

什么是测试和测试javascript文件中的.id变量在做什么？ – Cameron

test表示数组中的每个对象，并且test.id将过滤匹配的id https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter – Sajeetharan

我只问是因为我收到错误，说“测试变量隐式声明”和“表达预期” – Cameron

将列表项与$ scope变量进行比较

回答

相关问题