如何根据AngularJS中的下拉菜单项更改页面标题


How to change title of page based on drop down menu items in AngularJS

我有一个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>