Question

我是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进行比较吗？

Answer 1

您可以将值传递给函数并使用过滤器来过滤值，如下所示

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

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

1 个答案: