Я только начал использовать угловые js. Я использую его с CodeIgniter. Я пытаюсь добавить {class = "active"}, если условие соответствует.
Я пытаюсь добавить активный класс к <li> если его заголовок совпадает с последним сегментом URL-адреса.
т.е.
if(title of this nav_menu matches with the last uri segment) add "active" class else do nothing
Мой код выглядит следующим образом:
header.php
<ul class="nav navbar-nav" ng-app="" ng-controller="menuController"> <li ng-repeat="x in menus" ng-class="{'active': x.name = scope}"> <a ng-href="http://{{ x.link}}">{{ x.name }}</a> </li> </ul>
footer.php
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <script> function menuController($scope) { $scope.menus = [ { name : "Home", link : "projects/test/home" }, { name : "Daily Special", link : "projects/caesar/daily-especial" }, { name : "Menu", link : "projects/test/menu" }, { name : "Special", link : "projects/test/special" }, { name : "Gallery", link : "projects/test/gallery" }, { name : "About us", link : "projects/test/about-us" }, { name : "Contact", link : "projects/test/contact" } ]; $scope.current = '<?php echo $this->uri->segment(2); ?>'; } </script>
Я думаю, что проблематичным шагом является $ scope.current = 'uri-> segment (2); ?> ';
Вот как работает ng-класс, скажем, для приведенного ниже примера
ng-class="{ 'active': menu.IsCurrentTab, 'inactive': !menu.IsCurrentTab }"
class active будет добавлен, если в menu переменной области видимости IsCurrentTab значение true . inactive класс Else будет использоваться.
В вашем случае, во-первых, я не знаю, что делает этот код
$scope.current = '<?php echo $this->uri->segment(2); ?>';
Если это поместить текущее имя меню в переменную $scope.current , то все, что вам нужно сделать, это
<li ng-repeat="x in menus" ng-class="{'active': x.name == current}" >
Надеюсь это поможет.
Редактировать:
Хотелось бы, чтобы вы проверили, заполнено ли значение переменной scope.current.