Как добавить: активно к элементу меню динамически

Question

Я динамически создаю меню в своем однострочном веб-приложении angularjs.

`<li ng-repeat="m in menu"><a href="#{{m.url}}">{{m.name}}</a></li> 

Я хочу добавить активный класс в тег привязки, чтобы показать, какая выбранная страница выбрана.

a тег CSS:

.cl-effect-4 a::after { 
    position: absolute; 
    top: 170%; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background: #fff; 
    content: ''; 
    opacity: 0; 
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; 
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; 
    transition: height 0.3s, opacity 0.3s, transform 0.3s; 
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    transform: translateY(-10px); 
} 

.cl-effect-4 a:hover::after, 
.cl-effect-4 a:focus::after,.cl-effect-4 a:active::after { 
    height: 5px; 
    opacity: 1; 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
    transform: translateY(0px); 
} 

Я попытался ng-class="{active:getClass(m.url)}", но это не сработало, потому что он просто добавляет класс с именем активным. Мне нужно сделать якорный тэг активным по свойству.

Answer 1

Правильная сторона выражения ngClass в вашем примере должна быть логическим значением. Поэтому «active» будет добавлен, если getClass() истинно. Вы должны вернуть true или false из функции getClass.

$scope.getClass = function (path) { 
      if ($location.path().substr(0, path.length) === path) { 
       return true; 
      } else { 
       return false; 
      }