我有一个html文件,它显示了我通过Ajax调用使用php脚本从远程数据库获得的类别的下拉菜单。我希望能够将这个html页面的标题更改为我在下拉菜单中单击的项目的名称。例如,如果我单击下拉菜单中的加热和冷却,我希望它将页面的标题更改为"加热和冷却"。我一直在谷歌上搜索答案,但到目前为止,我只剩下更多的困惑。顺便说一句,我是在angularJS中做这件事的。这是我的html文件:
<h2> Awesome things </h2>
<div ng-controller="MainCtrl">
<span class="dropdown" on-toggle="toggled(open)">
<a href class="dropdown-toggle">
Click me to see some awesome things!
</a>
<ul class="dropdown-menu">
<li ng-repeat="category in categories track by $index"> <!--fix this expression-->
<a href>{{category}}</a>
</li>
</ul>
</span>
</div>
这是我的MainController文件'main.js':
angular.module('yostartupApp')
.controller('MainCtrl', function ($scope, $http) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma',
'SitePoint'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
console.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
//making ajax calls -- current step I'm working on DOES NOT WORK!!!!
$http.get('http://test.s17.sevacall.com/abhas/index.php').
success(function(data, status, headers, config) {
console.log(data);//debug
$scope.categories = data;
}).
error(function(data, status, headers, config) {
//log error
});
});
如有任何帮助,我们将不胜感激!提前感谢!
这可以通过使用纯javascript简单地实现——考虑以下
<select id="title_select">
<option value="title1">title1</option>
<option value="title2">title2</option>
<option value="title3">title3</option>
<option value="title4">title4</option>
<option value="title5">title5</option>
</select>
<script>
document.getElementById("title_select").addEventListener("change",changeTitle);
function changeTitle(){
var titleTemp = document.getElementById("title_select").value;
document.title=titleTemp;
}
</script>