Question

我正在尝试开发单页Web应用程序。在我的Welcome.html中我有几个按钮。当用户单击按钮时，所有按钮都应该消失，并且相应的消息或与所单击按钮相对应的任何内容应该出现在我的

Welcome.html是

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="ISO-8859-1">
<title>Film Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
 </head>

<body background='bg1.JPG'>
<img src='bg.png' width="1270" height="222"/>

<a href="#/AddNewFilm" class="addfilm_buttton button1">Add New Film</a>
<a href="#/ModifyFilm" class="modifyfilm_buttton button1">Modify Existing Film</a>

<div ng-view></div>
</body>
</html>

我的app.js是

var app=angular.module('myApp',['ngRoute'])

app.config(function($routeProvider) {
      $routeProvider

      .when('/AddNewFilm', {
        templateUrl : 'AddNewFilm.html',
        controller  : 'AddNewFilm'
      })

      .when('/ModifyFilm', {
        templateUrl : 'ModifyFilm.html',
        controller  : 'ModifyFilm'
      })
      .otherwise({redirectTo: '/'});
    });

app.controller('AddNewFilm', function($scope) {
      $scope.message = 'Hello from AddNewFilm';
    });


app.controller('ModifyFilm', function($scope) {
      $scope.message = 'Hello from ModifyFilm';
    });

AddNewFilm.html

<div align="center">
<h1>AddNewFilm</h1>
<h3>{{message}}</h3>
</div>

ModifyFilm.html

<div align="center">
<h1>ModifyFilm</h1>     
<h3>{{message}}</h3>
</div>
</html>

如何在用户单击按钮时隐藏其余按钮并显示相应的消息

0 个答案: