如何基於AngularJS中的下拉菜單項更改頁面標題

Question

我有一個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
    });

  });

任何幫助將不勝感激！ 提前致謝！

Answer 1

這可以簡單地通過使用普通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>