Question

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

使用Javascript：

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

在我的HTML中：

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

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

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

Answer 1

您可以将一个键传递给showOrNot函数，并将该键映射到该范围内的一个show / hide对象：

＆＃13;

  angular.module('app', [])
  .controller('exampleController', function($scope) {

    $scope.show = {};
    $scope.showOrNot = function(key) {
      $scope.show[key] = !$scope.show[key];
    };

  });

＆＃13;

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

＆＃13;

Answer 2

您可以使用this作为参数并评估函数中的值。

<div class="item" ng-click="showOrNot(this)">

Answer 3

在输入字段中应用ng-Class概念。此类变量基于您的逻辑显示并隐藏所有输入字段。

http://welcometolearntoday.blogspot.in/2015/01/ng-class-using-angularjs-example.html

使用单个功能隐藏多个输入

3 个答案: