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

【问题标题】：How to change title of page based on drop down menu items in AngularJS如何根据AngularJS中的下拉菜单项更改页面标题
【发布时间】：2014-11-05 02:33:23
【问题描述】：

我有一个 html 文件，它显示了一个类别的下拉菜单，我使用 php 脚本通过 Ajax 调用从远程数据库获取这些类别。我希望能够将此 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
    });

  });

任何帮助将不胜感激！提前致谢！

【问题讨论】：

这看起来很相关：stackoverflow.com/questions/12506329/… - 至少，您需要在级别定义控制器，否则 title 标记将超出范围。完成此操作后，只需将标题绑定到返回所选类别的函数即可

标签： javascript php html angularjs

【解决方案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>

【讨论】：