1

I have an html file that displays a drop down menu of categories that I am getting from a remote database using a php script via an Ajax call. I want to be able to change the title of this html page to the name of the item that I click in the drop down menu. For example, if I click on Heating and cooling in the drop down menu, I want it to change the title of the page to 'Heating and cooling'. I have been googling around for answers, but so far I am only left with more confusion. Btw I am doing this in angularJS. Here is my html file:

<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>

Here is my MainController file '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
    });

  });

Any help would be greatly appreciated! Thanks in advance!

Abhas Arya
  • 470
  • 1
  • 5
  • 19
  • 1
    This looks relevant: http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view - at the very least, you need to define the controller at the level, because otherwise the ``title`` tag will be out of scope. Once you do that, it should just be a matter of binding your title to a function that returns the selected category – Moritz Nov 04 '14 at 17:41

1 Answers1

1

this can simply be achieved by using plain javascript consider the following

<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>
Mateen
  • 1,631
  • 1
  • 23
  • 27