Question

当我点击图片或文字时，我想隐藏这个当前的div并显示另一个也使用ng-repeat的div

此代码html显示带有文本的主图像：

'@Description("Gets the total net amount for all line items (including taxes, discounts and surcharges).")
Public Property Get TotalNetAmount() As Double
    TotalNetAmount = TotalAmount - TotalDiscounts + TotalSurcharges + TaxAmount
End Property

例如，我有4个带文字的图像（数字，alphat，...）

点击文字编号=＆gt;显示包含此内容的div并隐藏其他

<div class="img-container" ng-repeat="sign in signs.List">
   <img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" />

<div>{{sign.texte}}</div>
</div>

点击alphat =＆gt;显示包含此内容的div并隐藏其他

<div class = "img-container" ng-repeat = "sign in signs.number">
    <Img class = "animated" ng-src = "{{sign.animated_src}}" width = "200" height = "150"/>
<div> {{sign.texte}} </ div>
</div>

Answer 1

我希望我理解正确。

HTML

<div class="img-container" ng-repeat="sign in signs.list">
    <img class="animated" ng-src="{{sign.animated_src}}" 
             width="200" height="150" 
             ng-click="filterList(sign.texte)" />
    <div ng-click="filterList(sign.texte)">{{sign.texte}}</div>
</div>

JS

$scope.filterList = function(char){
        if(typeof char === typeof 0){
        $scope.signs.list = $scope.signs.number;
    }
    else{
        $scope.signs.list = $scope.signs.alpha;
    }
};

$scope.signs = {
  list: ["A", 1, "B", 2, "C", 3],
  number: [1, 2, 3],
  alpha: ["A", "B", "C"]
};

工作小提琴==＆gt; https://jsfiddle.net/k19g6vsb/

Answer 2

使用ng-show和ng-hide指令

<div ng-hide="showItem" class="img-container" ng-repeat="sign in signs.List">
   <img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" ng-click="showItem = !showItem" />
</div>
<div ng-show="showItem" class="img-container" ng-repeat="sign in signs.List">
   <img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" ng-click="showItem = !showItem" />
</div>
</div>
<div ng-init="showThis = true" ng-click="showItem = !showItem"> {{sign.texte}}</div>

Answer 3

Here is the code sample please check

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 
  $scope.toggle = true;
    $scope.toggleFilter = function() {
      this.toggle = !this.toggle
    }
 
 
 
 
 
 
 
 /**** Ignore This ***/
    var testDATA = {
      name : "name",
      name2: "name2"
    }
    var list = [];
    for(var i=0;i<10;i++){
      testDATA.name = angular.copy("name"+i);
      
      list.push(testDATA);
    }
    console.log("test",list);
  $scope.list = list;
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div>
      <p ng-repeat="obj in list track by $index">
        <span ng-hide="toggle">{{obj.name}}</span>
        <span ng-show="toggle">{{obj.name2}}</span>
        <span>
          <input type="button" value="toggle" ng-click="toggleFilter();">
        </span>
      </p>
      
    </div>
  </body>

</html>

＆＃13;

以下是这方面的内容：PLUNKER

Answer 4

试试这个：

<!doctype html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>Angular Ajax with PHP</title>
</head>
<body>

<h2>The form</h2>

<div  ng-app="myApp" ng-controller="mainController">


<div class="img-container" ng-repeat="sign in signs.List">
    <div ng-show="show == $index">
       <img class="animated" ng-src="{{sign.src}}" ng-click="increment()" width="200" height="150" />
       <div>{{sign.text}}</div>
    </div>
</div>


</div>



<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>

var app = angular.module("myApp", []);

app.controller('mainController',function($scope){
  $scope.show = 0;
  $scope.signs = {};
  $scope.signs.List = [];
  $scope.signs.List.push({src:"img1.jpg",text:"Text 1"});
  $scope.signs.List.push({src:"img2.jpg",text:"Text 2"});

  $scope.increment = function() {
    $scope.show = $scope.show + 1;
    if ($scope.show >= $scope.signs.List.length) {

            $scope.show = 0;
    }
  }

});
</script>


</body>
</html>

显示和隐藏ng-repeat中的div

4 个答案: