[英]Can you use variables with NG-CLASS active link with Angular?
I want to use a loop to create my navigation Here is my code I keep getting an error saying it won't evaluate as a string? 我想使用循环来创建我的导航这是我的代码我一直收到一个错误,说它不会评估为字符串? The code that I wrote is so that it will loop through the $scope.navigation and use that to write out the navigation so I don't have to write out each list and anchor tag?
我写的代码是这样的,它将遍历$ 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>
My main js script file looks like this: 我的主要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";
}
}
It keeps giving me an error saying that the {{link.name}} cannot be evaluated as a string but it is a string? 它一直给我一个错误,说{{link.name}}不能被评估为字符串,但它是一个字符串? Is there a way to loop through a $scope.navigation and get it to output the navigation without having to manually write it out and still add the setActive function?
有没有办法循环$ scope.navigation并让它输出导航而不必手动写出来仍然添加setActive函数? I am kind of new at working with angularjs.
我对使用angularjs有点新意。 Is there a way to fix this issue or is it that doing things this way is not allowed in angular?
有没有办法解决这个问题,还是以角度方式不允许这样做?
There's a much better/easier way to accomplish setting a active
CSS class. 有一种更好/更简单的方法来完成设置
active
CSS类。 Just save a single value in your scope that holds the value of what is active. 只需在范围中保存一个值,该值保存活动的值。 Something like this:
像这样的东西:
$scope.setActive = function (index) {
$scope.activeIndex = index;
};
Then ng-class
allows you to give it an map where "the names of the properties whose values are truthy will be added as css classes to the element" (From http://docs.angularjs.org/api/ng.directive:ngClass ). 然后
ng-class
允许你给它一个映射,其中“值为trtrhy的属性的名称将作为css类添加到元素中”(来自http://docs.angularjs.org/api/ng.directive: ngClass )。
So you can set the CSS class if the $index
is the activeIndex
: 因此,如果
$index
是activeIndex
您可以设置CSS类:
ng-class="{active: $index == activeIndex}"
I've tested the dnc253's solution. 我测试了dnc253的解决方案。 But it doesn't seems worked anymore.
但它似乎不再有用了。
I had to create a method like this: 我必须创建一个这样的方法:
$scope.isActive = function(index){
return $scope.activeIndex === index;
};
And in html : 并在HTML中:
ng-class="{active: isActive($index)}"
This works fine. 这很好用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.