【发布时间】：2018-07-11 17:42:30
【问题描述】：
在下面的示例中，我有一个名为 DList 的集合。 （如果有语法错误，请忽略）。在给定的列表中，它包含 3 行。现在在每一行的 UI 中，我都有名为“CustomerTab”和“ProductTab”的选项卡集合。我使用了具有href 和click 事件的锚标记。我希望点击事件被触发，然后显示所需的选项卡
由用户单击。默认情况下，我在 UI 中显示 'CustomerTab' 。如果我单击“ProductTab”事件被触发，但“ProductTab”的 HTML 内容没有显示。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form id="frmTest" ng-app="enc" ng-controller="encMain">
<div ng-repeat="D in DList">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id="CustomerTab" aria-expanded="false" ng-attr-xlink:href="{{D.CustomerTab}}" ng-click="CustomerTabClick(D)">Customer</a></li>
<li><a data-toggle="tab" id="ProductTab" aria-expanded="true" ng-attr-xlink:href="{{D.ProductTab}}" ng-click="PTabClick(D)">Product</a></li>
</ul>
</div>
<div class="tab-content">
<section class="tab-pane fade active in" ng-attr-id={{D.CustomerTabContent}}>
<p>customerBlock</p>
</section>
<section class="tab-pane fade in" ng-attr-id={{D.ProductTabContent}}>
<p>ProductBlock</p>
</section>
</div>
</form>
</body>
</html>
我在 angularjs 中面临的问题是我需要首先触发 click 事件，该事件正在工作，然后超链接也应该工作。
现在的问题是超链接不起作用。
var app = angular.module('enc', []);
app.controller('encMain', function ($scope) {
$scope.DList = [];
function addDList(rowId, dName, customertab, producttab,customertabContent,producttabContent) {
return {
RowId: rowId,
DName: dName,
CustomerTab: customertab,
ProductTab: producttab,
CustomertabContent: customertabContent,
ProducttabContent: producttabContent
}
}
$scope.CustomerTabClick = function (data) {
alert('Customer');
//Processing some data on the click event and then returning true value
return true;
}
$scope.PTabClick = function (data) {
alert('Product');
//Processing some data on the click event and then returning true value
return true;
}
$scope.DList.push(new addDList('1', 'Catalog1', 'CustomerTab-1-1', 'ProductTab-1-1', 'CustomerTab-1-1', 'ProductTab-1-1'));
});
【问题讨论】：
-
请解决语法错误并编辑问题。
-
代码已更新
标签： angularjs