在 ng-show 中，单击回复链接时不起作用

<html lang="en" ng-app=“myDiscuss">
<head><!-- all the script files-->
</head>
<body>
<div class="thumbnail" ng-controller="TabController as tabs”>
<!-- some other div-->
        <div ng-show="tabs.isSelected(1)">
                    <small>No of likes</small>
        </div>

            <section class="caption"  >
                    <ul class="nav nav-pills">
                            <li ng-class="{ active:tab === 1 }" >
                                <a href ng-click="tabs.selectTab(1)">Helpful</a>
                            </li>
                            <li ng-class= "{ active:tab === 2 }">
                                <a href ng-click="tabs.selectTab(2)">Comment</a>
                            </li>
                    </ul>
                    <div class="panel" ng-show="tabs.isSelected(2)">
                            <blockquote>
                                <ul class="nav nav-pills">
                                    <li ng-class="{ active:tab === 3 }" >
                                        <a href ng-click="tabs.selectTab(3)" >Helpful</a>
                                    </li>
                                    <li ng-class= "{ active:tab === 4}">
                                        <a href ng-click="tabs.selectTab(4)">Reply</a>
                                    </li>
                                </ul>
                                <input type="text" ng-show="tabs.isSelected(4)">
                            </blockquote>
                    </div>
            </section>
        </div>
</body>
</html>

JavaScript File
var app = angular.module("myDiscuss", []);
app.controller("TabController", function() {
    this.tab=0;
    this.selectTab = function(setTab) {
        this.tab= setTab;
    };
    this.isSelected = (function(checkTab){
        return this.tab === checkTab;
    });
});

当我单击"评论"链接时，它会打开div"面板"。而当我单击"回复"链接时，它不会打开输入标签。

带有评论和有用链接的图像单击评论链接时打开的div"面板"

实际上，它正在工作，但由于您使用相同的 this.tab 变量，因此它不起作用。你应该采用单独的变量。

为主选项卡和子

选项卡使用单独的变量，或者您可以使用其他方法来分隔主选项卡和子选项卡。如 1.1 或 3.3 等。有很多方法。

this.tab=0;
this.subTab = 0;
this.selectTab = function(setTab) {
    this.tab= setTab;
};
this.selectSubTab = function(setTab){
    this.subTab = setTab;
};
this.isSelected = (function(checkTab){
    return this.tab === checkTab;
});
 this.isSelectedSub = (function(checkTab){
    return this.subTab === checkTab;
});

检查 https://plnkr.co/edit/leTBpJUVC7giDCs9KtQX

为了减少混淆，我建议将控制器分配给一个变量：

var app = angular.module("myDiscuss", []);
app.controller("TabController", function() {
    var v = this;
    v.tab=0;
    v.selectTab = function(setTab) {
        v.tab= setTab;
    };
    v.isSelected = (function(checkTab){
        return v.tab === checkTab;
    });
});

这是因为在函数中，this指的是函数，而不是控制器。通过使用单独的变量，可以避免不一致。

甚至你使用的别名，TabController as tabs，也使用相同的东西：

$scope.tabs = this内部。

相关内容

最新更新

热门标签：