function DefaultController($scope, navBarService) {
var vm = this;
$scope.toggleHeader = true;
$scope.userNameNav ='';
//Sharing info with other controllers
$scope.$on('toggleHeader', function(evt, data) {
$scope.toggleHeader = data;
});
$scope.$on('changeName', function(evt, data) {
$scope.userNameNav = data;
});
$scope.searchForItem = function() {
console.log('button clicked');
console.log($scope.userSearch);
};
}//end DefaultController

.Navigation {
width:100%;
height:25em;
background-image: url('http://wallpapercave.com/wp/UYnUUzz.jpg');
background-size: cover;
background-position:50% 50%;
position: sticky;
}
.navContent {
float:right;
}
.searchNav {
border: 0;
border-bottom: 1px solid red;
outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rental app</title>
<link rel="stylesheet" href="styles/userPage.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="vendors/angular.min.js" charset="utf-8"></script>
<script src="vendors/angular-route.min.js" charset="utf-8"></script>
<script src="scripts/controllers/defaultController.js" charset="utf-8"></script>
<script src="scripts/controllers/RegisterController.js" charset="utf-8"></script>
<script src="scripts/controllers/LoginController.js" charset="utf-8"></script>
<script src="scripts/controllers/userController.js" charset="utf-8"></script>
<script src="scripts/client.js" charset="utf-8"></script>
<script src="scripts/services/credentialsService.js" charset="utf-8"></script>
<script src="scripts/services/navBarService.js" charset="utf-8"></script>
<script src="scripts/services/addItemSerivce.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<link rel="stylesheet" href="styles/register.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body ng-app='myApp'>
<div class="" ng-controller='DefaultController'>
<div class="navImage">
<div class="Navigation" ng-if='toggleHeader'>
<div class="navContent">
<a href="http://localhost:7138/#!/login">Logout</a>
<input class='searchNav' type="button" name="button" value="Search" ng-click='searchForItem()' >
<input id='getUserInput' type="text" placeholder="Search Item" ng-model='userSearch'/>{{ userSearch }}
</div>
<h1 class='greetUser'>Welcome {{userNameNav}}</h1>
</div>
</div>
<ng-view></ng-view>
</div>
</body>
</html>
&#13;
在html文件中,我希望在单击搜索按钮时获取用户搜索的值。我能够获得一个单击&#39;按钮的控制台日志,但我无法获得搜索框的值。我也试过使用vm,但是没有用,所以我把它拿出来了
答案 0 :(得分:0)
在将变量放入模型之前,应该在控制器中声明变量。您可以编写:$scope.formData = {};
并在HTML和JS中使用此对象。
使用此版本:
function DefaultController($scope, navBarService) {
var vm = this;
$scope.toggleHeader = true;
$scope.userNameNav ='';
$scope.formData = {};
//Sharing info with other controllers
$scope.$on('toggleHeader', function(evt, data) {
$scope.toggleHeader = data;
});
$scope.$on('changeName', function(evt, data) {
$scope.userNameNav = data;
});
$scope.searchForItem = function() {
console.log('button clicked');
console.log($scope.formData.userSearch);
};
}//end DefaultController
在你的模板中:
<input id='getUserInput' type="text" placeholder="Search Item" ng-model='formData.userSearch'/>{{ formData.userSearch }}