您可以将变量与 NG-CLASS 活动链接与 Angular 一起使用吗?

Can you use variables with NG-CLASS active link with Angular?

本文关键字：一起 Angular 链接 活动 变量 NG-CLASS      更新时间：2023-09-26

我想使用循环来创建我的导航 这是我的代码 我不断收到错误，说它不会计算为字符串？我编写的代码是为了让它遍历 $scope.navigation 并使用它来写出导航，这样我就不必写出每个列表和锚标记？

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

我的主要js脚本文件如下所示：

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

            }
        }

它一直给我一个错误，说 {{link.name}} 不能被评估为字符串，但它是一个字符串？有没有办法循环遍历 $scope.navigation 并让它输出导航，而无需手动写出它并仍然添加 setActive 函数？我对使用angularjs有点陌生。有没有办法解决这个问题，还是在角度中不允许以这种方式做事？

有一种

更好/更简单的方法来完成设置active CSS类。只需在作用域中保存一个值，该值保存活动内容的值。像这样：

$scope.setActive = function (index) {    
  $scope.activeIndex = index;
};

然后ng-class允许你给它一个映射，其中"值为真实的属性的名称将作为css类添加到元素中"（来自 http://docs.angularjs.org/api/ng.directive:ngClass）。

因此，如果$index是activeIndex，则可以设置CSS类：

ng-class="{active: $index == activeIndex}"

我已经测试了dnc253的解决方案。但它似乎不再有效了。

我必须创建这样的方法：

$scope.isActive = function(index){
    return $scope.activeIndex === index;
};

在 html 中：

ng-class="{active: isActive($index)}"

这工作正常。

相关文章：