Question

在下面的示例中，我有一个名为DList的集合。（忽略语法错误（如果有））。在给定的列表中，它包含3行。现在，在用户界面的每一行中，我都有名为“ CustomerTab”和“ ProductTab”的选项卡集合。我使用了具有href和click事件的定位标记。我希望触发点击事件，然后显示所需的标签用户点击的内容。默认情况下，在用户界面中，我正在显示“ 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')); 
});

Answer 1

@jaiganesh

您无法切换到其他标签的原因是静态CSS类。

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

看上面的代码。对于这两个部分，您要应用的类都是静态的。在这里第一部分将始终可见，第二部分将永远不可见。在您的代码中，我看不到任何处理这种情况的机制。

我可以为您推荐一种情况。.而不是放置静态类名，而是放置一个变量。

<div class="tab-content">
            <section class="{{classCustomer}}" ng-attr-id={{D.CustomerTabContent}}>
                <p>customerBlock</p>
            </section>
            <section class="{{classProduct}}" ng-attr-id={{D.ProductTabContent}}>
                <p>ProductBlock</p>
            </section>
        </div>

在angularjs代码中定义这两个变量

$scope.classCustomer = "tab-pane fade active in";
$scope.classProduct = "tab-pane fade in";

您需要使用以下功能更改这些变量

$scope.CustomerTabClick = function (data) {
                alert('Customer');
                $scope.classCustomer = "tab-pane fade active in";
                $scope.classProduct = "tab-pane fade in";
                //Processing some data on the click event and then returning true value
                return true;
            }

            $scope.PTabClick = function (data) {
                alert('Product');
                $scope.classCustomer = "tab-pane fade in";
                $scope.classProduct = "tab-pane fade active in";
                //Processing some data on the click event and then returning true value
                return true;
            }

这应该可以完全解决您的问题。

现在完整的代码如下所示。

<!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>
        var app = angular.module('enc', []);
        app.controller('encMain', function ($scope) {
            $scope.DList = [];
            $scope.classCustomer = "tab-pane fade active in";
            $scope.classProduct = "tab-pane fade in";

            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');
                $scope.classCustomer = "tab-pane fade active in";
                $scope.classProduct = "tab-pane fade in";
                //Processing some data on the click event and then returning true value
                return true;
            }

            $scope.PTabClick = function (data) {
                alert('Product');
                $scope.classCustomer = "tab-pane fade in";
                $scope.classProduct = "tab-pane fade active in";
                //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'));
        });
    </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="{{classCustomer}}" ng-attr-id={{D.CustomerTabContent}}>
                <p>customerBlock</p>
            </section>
            <section class="{{classProduct}}" ng-attr-id={{D.ProductTabContent}}>
                <p>ProductBlock</p>
            </section>
        </div>
    </form>
</body>
</html>

绑定href和click事件都在angularjs中

1 个答案: