0

Как сделать чтобы элемент появлялся только, на том блоке на котором был клик? В моем примере когда нажимаешь на show hide list, список появляется на всех элементах. Как переделать код, чтобы список появлялся только в одном блоке?

Рабочий plunker https://plnkr.co/edit/8rr6MunVARNXJo4tEJno?p=preview

var app = angular.module('angularjs-starter', []);

app.controller('SpicyCtrl', function($scope) {
  $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  $scope.ngShowhide = false;
  $scope.ngShowhideFun = function(flag) {
    if (flag) {
      $scope.ngShowhide = false;
    } else {
      $scope.ngShowhide = true;
    }
  };
});
ul li {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  margin: 5px;
}
<html ng-app="angularjs-starter">

<head lang="en">
  <meta charset="utf-8">
  <title>Controller example Plunker</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
</head>

<body>
  <h1>Welcome</h1>
  <div>Controller example</div>

  <div ng-controller="SpicyCtrl">
    <ul>
      <li ng-repeat="item in items">
        <a ng-click="ngShowhideFun(ngShowhide)">show hide list</a>
        <div class="" ng-show="ngShowhide">
          <div style=" background-color : yellow">
            Hi This is body area!
          </div>
        </div>
        {{item}}
      </li>
    </ul>
  </div>
</body>

</html>

1 ответ 1

0

Вот так?

var app = angular.module('angularjs-starter', []);

app.controller('SpicyCtrl', function($scope) {
  $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  $scope.ngShowhide =  [false, false, false, false, false, false, false, false, false];
  $scope.ngShowhideFun = function(flag) {
    $scope.ngShowhide[flag] = !$scope.ngShowhide[flag];
  };
});
ul li {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  margin: 5px;
}
<html ng-app="angularjs-starter">

<head lang="en">
  <meta charset="utf-8">
  <title>Controller example Plunker</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
</head>

<body>
  <h1>Welcome</h1>
  <div>Controller example</div>

  <div ng-controller="SpicyCtrl">
    <ul>
      <li ng-repeat="item in items">
        <a ng-click="ngShowhideFun(item)">show hide list</a>
        <div class="" ng-show="ngShowhide[item]">
          <div style=" background-color : yellow">
            Hi This is body area!
          </div>
        </div>
        {{item}}
      </li>
    </ul>
  </div>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.