-2
我有一個導航欄，其中包含諸如添加/顯示等選項。如何在不重定向的情況下爲從控制器的不同功能返回的內容
現在，我需要調用相同控制器的不同功能，並單擊這些控件並在不更改鏈接的情況下呈現結果。
例如：
當用戶單擊顯示，列表應該會顯示由控制器的顯示功能恢復。
當用戶點擊添加時，應該顯示一個表單，在提交按鈕的控制器函數將被調用。
控制器：
angular.module('Todo', ['ngRoute'])
.config(['$resourceProvider', function($resourceProvider) {
// Don't strip trailing slashes from calculated URLs
$resourceProvider.defaults.stripTrailingSlashes = false;
}]);
.controller('mainController', function($scope, $http)
{
$scope.formData = {};
$scope.howToDo = function() {
// get all and show them
$http.get('/musicians')
.success(function(data) {
//$scope.showList="true";
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
}
//get with an id
$scope.getOneTodo = function() {
$http.get('/musicians/' + id)
.success(function(data) {
//$scope.showMusician="true";
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
// send the text to the node API
$scope.createTodo = function() {
$http.post('/musicians', $scope.formData)
.success(function(data) {
//$scope.showcreate ="true"
$scope.formData = {}; // clear the form
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
// delete
$scope.deleteTodo = function(id) {
$http.delete('/musicians/' + id)
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
/*
$scope.updateTodo = function(id) {
$http.delete('/musicians' + id)
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};*/
});
HTML：
<!DOCTYPE HTML>
<html ng-app="Todo">
<head>
<meta charset="UTF-8">
<title>DemoAPI</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
<!--<link rel="stylesheet" href="./Client/css/styling.css" />-->
<!--<script type="text/javascript" src="/Client/public/core.js"></script>-->
</head>
<body>
<div ng-controller="mainController">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="/">
Demp<strong>API</strong></a>
</div>
<ul class="nav navbar-nav">
<li><a href="#" ng-click="showToDo()"><strong>Show Musicians</strong></a></li>
<li><a href="#" ng-click="createTodo()"><strong>Add Musicians</strong></a></li>
</ul>
</div>
<form name="userForm" ng-submit="createTodo()" ng-if="" novalidate>
<div class="row col-lg-offset-3">
<div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.name.$invalid && userForm.name.$dirty}" >
<label class="control-label">Name</label>
<input type="text" class="form-control" name="name" ng-model="user.name" ng-required="true" ng-minlength="3" placeholder="Name" />
<span class="error-message" ng-show="userForm.name.$dirty
&& userForm.name.$error.required">You are required to provide your name</span>
<span class="error-message" ng-show="userForm.name.$dirty
&& userForm.name.$error.minlength">Your name should contain 3 or more characters</span>
</div>
</div>
<div class="row col-lg-offset-3">
<div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.band.$invalid && userForm.band.$dirty }" >
<label class="control-label">Band</label>
<input type="text" class="form-control" name="email" ng-model="user.band" ng-required="true" placeholder="Your Band Name" />
<span class="error-message" ng-show="userForm.email.$dirty
&& userForm.name.$error.required">You are required to provide your Band name </span>
</div>
</div>
<div class="row col-lg-offset-3">
<div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.instrument.$invalid && userForm.instrument.$dirty }" >
<label class="control-label">Instrument</label>
<input type="text" class="form-control" name="instrument" ng-model="user.instrument" ng-required="true" placeholder="The Instrument you play" />
<span class="error-message" ng-show="userForm.instrument.$dirty
&& userForm.name.$error.required">You are required the instrument you play </span>
</div>
</div>
<div class="row col-lg-offset-3">
<button class="btn btn-primary"
ng-disabled="userForm.$invalid"
type="submit">Save</button>
</div>
</form>
</div>
</body>
</html>
我能請得到這方面的一些方向？
聽起來像一個非常基本的[ng-show]（https://docs.angularjs.org/api/ng/directive/ngShow）/ [ng-click] （https://docs.angularjs.org/api/ng/directive/ngClick）用例，但很難說沒有任何代碼。 – Fissio
分享代碼，究竟是什麼不工作或你想要什麼 – harishr
@Fissio：用代碼更新。 –