我是 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 进行比较？
最佳答案
您可以将值传递给函数并使用 filter 来过滤值，如下所示
$scope.getData = function(value){
$scope.filtered = $scope.img.filter(test=>test.id == value);
}
演示
(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>关于javascript - 将列表项与 $scope 变量进行比较，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45131385/