Titel dynamisch ändern AngularJS

Question

Unten ist mein Code, Ich muss den Haupttitel dynamisch in h2 Tag auf Klick der Navigation (Navlinks) durch angularJS ändern.

Vielen Dank im Voraus ..

var portfolioApp = angular.module('portfolioApp', []); 
 

 
portfolioApp.controller('navCtrl', ['$scope', '$location', function ($scope, $location) { 
 

 
    $scope.navLinks = [{ 
 
     Title: 'home', 
 
     LinkText: 'Home' 
 
    }, { 
 
     Title: 'about', 
 
     LinkText: 'About Us' 
 
    }, { 
 
     Title: 'portfolio', 
 
     LinkText: 'Portfolio' 
 
    }, { 
 
     Title: 'contact', 
 
     LinkText: 'Contact Us' 
 
    }]; 
 

 
    $scope.navClass = function (page) { 
 
     var currentRoute = $location.path().substring(1) || 'home'; 
 
     return page === currentRoute ? 'active' : ''; 
 
    }; 
 

 
$scope.maintitle = "Any Title"; 
 

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script> 
 
<div ng-app="portfolioApp" ng-controller="navCtrl"> 
 
<h2>{{maintitle}}</h2> 
 
<header class="well sidebar-nav"> 
 
    <ul class="nav nav-list"> 
 
     <li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')"> 
 
      <a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a> 
 
     </li> 
 
    </ul> 
 
</header> 
 
    </div>

Answer 1

Check Out This:

var portfolioApp = angular.module('portfolioApp', []); 
 

 
portfolioApp.controller('navCtrl', ['$scope', '$location', function ($scope, $location) { 
 
$scope.maintitle = "Some Thing"; 
 
    $scope.navLinks = [{ 
 
     Title: 'home', 
 
     LinkText: 'Home' 
 
    }, { 
 
     Title: 'about', 
 
     LinkText: 'About Us' 
 
    }, { 
 
     Title: 'portfolio', 
 
     LinkText: 'Portfolio' 
 
    }, { 
 
     Title: 'contact', 
 
     LinkText: 'Contact Us' 
 
    }]; 
 

 
    $scope.navClass = function (page) { 
 
     var currentRoute = $location.path().substring(1) || 'home'; 
 
     return page === currentRoute ? 'active' : ''; 
 
    }; 
 
    $scope.goToLink = function(navlink){ 
 
    $scope.maintitle = navlink.Title; 
 
    // fix location service accordin to your requirment 
 
    $location.path(navlink.Title); 
 
    } 
 

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script> 
 
<div ng-app="portfolioApp"> 
 
<header class="well sidebar-nav"> 
 
    <ul class="nav nav-list" ng-controller="navCtrl"> 
 
     <h2>{{maintitle}}</h2> 
 

 
     <li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')"> 
 
      <a ng-click="goToLink(navLink)">{{navLink.LinkText}}</a> 
 
     </li> 
 
    </ul> 
 
</header> 
 
    </div>

Answer 2

$scope.maintitle = "text you want"; 

EDIT: Es wird nicht funktionieren, da es aus Controller ist. Ich kann Ihnen raten, es in den Controller zu tragen, einen anderen Controller zu erstellen oder nach Möglichkeiten zu suchen, Objekte zu manipulieren, die nicht mehr im Controller sind.

Answer 3

<div ng-app="portfolioApp"> 
<div ng-controller="navCtrl"> 
<h2>{{maintitle}}</h2> 
<header class="well sidebar-nav"> 
    <ul class="nav nav-list" > 
     <li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')"> 
      <a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a> 
     </li> 
    </ul> 
</header> 
<div> 
</div> 

und verwenden

$scope.maintitle = 'title'