使用单个函数隐藏多个输入

I'm trying to hide an input, I do that in this way:

我试图隐藏输入，我这样做：

Javascript:

使用Javascript：

$scope.show= true;
$scope.showOrNot= function () {
    $scope.show= !$scope.show;
}

In my html:

在我的HTML中：

<div class="item" ng-click="showOrNot()">
     <p><b>blablabla</b></p>
</div>
<li class="item" ng-hide="show">
    <input type="text">
</li>

The showOrNot function is called when I click in the div before the specific input.

当我在特定输入之前单击div时调用showOrNot函数。

If I have 20 inputs in my page, I have to write in my javascript 20 times same functions. Have you an idea how to resolve more efficiently?

如果我的页面中有20个输入，我必须在我的javascript中写入20次相同的函数。您是否知道如何更有效地解决问题？

3 个解决方案

#1

You could pass a key to the showOrNot function and map the key to a show/hide object on the scope:

您可以将密钥传递给showOrNot函数，并将密钥映射到范围上的显示/隐藏对象：

  angular.module('app', [])
  .controller('exampleController', function($scope) {

    $scope.show = {};
    $scope.showOrNot = function(key) {
      $scope.show[key] = !$scope.show[key];
    };

  });

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

<div ng-app="app">

  <div ng-controller="exampleController">

    <div class="item" ng-click="showOrNot('item')">
      <p><b>blablabla 1</b>
      </p>
    </div>
    <li class="item" ng-hide="show.item">
      <input type="text">
    </li>

    
    
    <div class="item" ng-click="showOrNot('item2')">
      <p><b>blablabla 2</b>
      </p>
    </div>
    <li class="item" ng-hide="show.item2">
      <input type="text">
    </li>
    
    
    <div class="item" ng-click="showOrNot('item3')">
      <p><b>blablabla 3</b>
      </p>
    </div>
    <li class="item" ng-hide="show.item3">
      <input type="text">
    </li>
    
  </div>

</div>

3 个解决方案

#1

更多相关文章

随机推荐