在angularjs中单击按钮隐藏并显示

时间:2019-05-28 05:05:34

标签: javascript angularjs

我想默认隐藏值,并在我第一次单击按钮时显示该值。当您第二次单击同一按钮时,它应该隐藏该值而不是显示。反之亦然。

这是我的html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>AngularJS</title>
  <script 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"> 
  </script>
  <script th:src="@{/main.js}"></script>   
<head>
<body ng-app="EmployeeManagement" ng-controller="EmployeeController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
 <div ng-show = "IsVisible"> yes </div>
</body>
</html>

这是我的JS文件:

var app = angular.module("EmployeeManagement", []);
app.controller("EmployeeController", function($scope, $http) {
 $scope.ShowHide = function(){
     $scope.IsVisible =  true;
 }

有人可以告诉我如何实现这种情况吗?

3 个答案:

答案 0 :(得分:2)

@karthick,您也可以在模板端完成此操作,而无需控制器的任何交互。

  <!DOCTYPE HTML>
  <html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>AngularJS</title>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"> 
    </script>
    <script >
    var app = angular.module("EmployeeManagement", []);
      app.controller("EmployeeController", function($scope, $http) {
    })
  </script>   
  <head>
  <body ng-app="EmployeeManagement" ng-controller="EmployeeController" ng-init="IsVisible=false">
  <input type="button" value="Show Angular" ng-click="IsVisible = !IsVisible"/>
  <div ng-show = "IsVisible"> yes </div>
  </body>
  </html>

答案 1 :(得分:1)

单击按钮时,应使用file = open(file_path, 'r') # get headers try: header=next(file).replace("\n","").split(",") except: raise Exception("The file {} is empty.".format(file.file_path)) count = 0 # to count number of rows # loop through file and process data for line in file: try: data=[int(x) if x else None for x in line.replace("\n","").split(",")] except: raise Exception("The file {} contains invalid data.".format(file.file_path)) count += 1 for f in callback_array: f(header,data) 中的negation。这样,如果可见,它将隐藏;如果隐藏,则可见:

尝试一下:

$scope.IsVisible

答案 2 :(得分:1)

更好的名称将是showHide,而不是toggle()函数。在此函数内部,无需设置$scope.IsVisible = true,您可以像!$scope.IsVisible那样切换该变量的值。