I am trying to create a navigation using a loop in my code. However, I keep encountering an error which says that it won't evaluate as a string. The idea is to loop through the $scope.navigation and use it to generate the navigation dynamically instead of manually writing out each list and anchor tag.
<!DOCTYPE html>
<html ng-app="Sample">
<head>
<title>Sample Angular App</title>
<script src="Scripts/basket.js"></script>
<link rel="stylesheet" href="css/global.css"/>
<script src="Scripts/angular.min.js"></script>
<script src="controllers/main.js"></script>
<script src="routes/route.js"></script>
</head>
<body>
<div class="navigation" ng-controller="AppCtrl">
<ul class="cf" >
<li class="link {{link.name}}" ng-class="{{link.name + 'Active'}}" ng-repeat="link in navigation">
<a href="{{link.route}}" ng-click="setActive($index)">{{link.name | uppercase}}</a>
</li>
</ul>
</div>
<div class="wrapper">
<div ng-view>
</div>
</div>
</body>
</html>
This is how my main js script file is structured:
function AppCtrl($scope) {
$scope.navigation = [
{ name:"main", route:"#/"},
{ name:"edit", route:"#/edit" },
{ name: "save", route: "#/save" },
{ name: "settings", route: "#/settings" }
];
$scope.currentPage = null;
$scope.setCurrentPage = function (index) {
$scope.currentPage = $scope.navigation[index];
}
$scope.setActive = function (index) {
angular.forEach($scope.navigation, function (value, key) {
$scope[value.name + 'Active'] = "";
});
var active = $scope.navigation[index].name;
$scope[active + 'Active'] = "active";
}
}
I'm facing an issue where the {{link.name}} is not being evaluated as a string even though it is one. Is there a way to resolve this problem and successfully loop through $scope.navigation to output the navigation dynamically while also incorporating the setActive function? As a beginner with angularjs, I am unsure if this approach is allowed or if there are constraints that need to be addressed.