时间戳

首页 > 解决方案 > 如何在angularjs中显示特定的div onclick

angularjs - 如何在angularjs中显示特定的div onclick

问题描述

我有几个用于 onclick 的 div 和几个 div 来显示它一次 onclick，但我只想显示与特定 div 相关的特定 div。这里我的应用程序工作正常，但是对于 2 个不同的部分它重复，如果我第一次单击第四个 div也显示。我也给出了不同的功能。任何人都可以帮助我，我是 angularjs 的新手。下面是代码。

HTML

<script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="app.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <div ng-repeat="item in items">
    <div style="color:red" ng-click="onClick1($index,0)">first</div>
    <div style="color:blue" ng-show="div_[$index+'_0']">yyy</div>
    <br />
    <hr />
  </div>
  <div ng-repeat="item in items2">
    <div style="color:red" ng-click="test($index,0)">second</div>
    <p style="color:blue" ng-show="div_[$index+'_0']">zzz</p>
    <br />
    <hr />
  </div>
</body>

应用程序.js

  angular.module('plunker', [])
    .controller('MainCtrl', function($scope) {
      $scope.div_=[];
      $scope.items = [
        {
        // id: 1,
          title: "first item"
        },
        {
        // id: 2,
          title: "second item",
        },
        {
        // id: 3,
          title: "third item",
        }
      ];
      $scope.items2 = [
        {
          id: 5,
          title: "first item 1"
        },
        {
          id: 6,
          title: "second item 2",
        },
        {
          id: 7,
          title: "third item 3",
        }
      ];
      $scope.onClick1 = function (indexa, row1){
        alert('first');
        $scope.div_[indexa+'_'+row1]=true;
      }
      $scope.test = function (indexb, row2){
        $scope.div_[indexb+'_'+row2]=true;
      }
    });

标签： angularjs

解决方案

您正在使用相同的变量来显示/隐藏 div，您已经构建了一些东西来解决这个问题，但没有使用。尝试这个：

<div style="color:red" ng-click="test($index, 1)">second</div>
<p style="color:blue" ng-show="div_[$index+'_1']">zzz</p>

现在div_[$index+'_0']是div_[$index+'_1'] 并且test($index, 0)必须是test($index, 1)

推荐阅读