gpt4 book ai didi

javascript - 你能在 Angular 中使用带有 NG-CLASS 事件链接的变量吗?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:16:09 26 4
gpt4 key购买 nike

我想使用一个循环来创建我的导航这是我的代码我一直收到一个错误,说它不会评估为一个字符串?我编写的代码是这样的,它将遍历 $scope.navigation 并使用它来写出导航,这样我就不必写出每个列表和 anchor 标记?

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

如果 $indexactiveIndex,那么您可以设置 CSS 类:

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

关于javascript - 你能在 Angular 中使用带有 NG-CLASS 事件链接的变量吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18744717/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com