将事件类添加到第一个 JSON 对象的导航链接，该对象在选择任何导航链接之前最初显示。
<强> https://embed.plnkr.co/cI2QXbUgtnbwH5qe5CKj/
我的 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RichMedia Portfolio</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app="richPortfolio">
<div class="container" ng-controller="adsCtrl">
<nav>
<ul class="accordion" onclick="myFunction(event)">
<li ng-repeat="ad in ads">
<a class="ad" href="" id="ad{{ ad.id }}" ng-click="select(ad)">{{ ad.title }}</a>
</li>
</ul>
</nav>
<div class="showCase_container">
<div id="ad{{ selectedItem.id }}Case" class="adActive">
<div class="description">
<h3 class="ad_name">{{ selectedItem.title }}</h3>
<p>{{selectedItem.content}}</p>
<hr>
<h3>Description</h3>
<p>{{ selectedItem.desc }}</p>
<hr>
<h3>Dimension</h3>
<p>{{ selectedItem.dim }}</p>
</div>
</div>
</div>
</div>
<script src="rich.js"></script>
</body>
</html>
我的JS:
// Modules
var rich = angular.module('richPortfolio', ['ngRoute']);
rich.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'adsCtrl',
templateUrl: 'pages/home.html'
})
.otherwise({ redirectTo: '/' });
});
// controllers
rich.controller('adsCtrl', ['$scope', 'ads', function($scope, ads , element){
ads.then(function(data){
$scope.ads = data;
$scope.selectedItem = data[0];
});
// nav redirection
$scope.select = function(item) {
$scope.selectedItem = item;
};
}]);
//services
rich.factory('ads', ['$http', function($http){
// after v1.6 need to use .then function to get it worked
return $http.get('ads.json')
.then(function(response){
//alert('success');
return data = response.data;
},function(error){
//alert('error');
});
}]);
function myFunction(e) {
var elems = document.querySelector(".accordion .active");
if(elems !==null){
elems.classList.remove("active");
}
e.target.className = "active";
}
我的 JSON:
[
{
"id": "1",
"title": "cube",
"content": "cube 1 cube",
"desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
"dim":"300x250"
},
{
"id": "2",
"title": "Gallery",
"content": "Gallery 2 Gallery",
"desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
"dim":"300x250, 300x600, 728x90, 970x250"
}
]
我需要的只是将事件类添加到导航栏初始 JSON 对象数据的标题中。 <强> https://embed.plnkr.co/cI2QXbUgtnbwH5qe5CKj/
任何帮助将不胜感激。
最佳答案
您可以使用 ng-class 和索引来使第一个选项卡处于事件状态，如下语法所示
<li ng-repeat="ad in ads" ng-class="{'active':$index===0}></li>
关于javascript - 最初使用 Angular JS 将事件类添加到第一个 JSON 数据对象的导航链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52036689/