Question

我正在寻找一个关于使用ng-show的小angularJS指令的解决方案。我有一个带有三个导航图标的标题。当您单击每个图标时，将向用户显示该图标的说明。它可以正常工作，直到你到达想要显示所有描述的最后一个图标。

这段代码有什么问题？任何建议，将不胜感激：这是一个显示我所说的内容的链接：demos screencast here

的javascript：

$scope.brandingTitleToggle = function () {
        var brandingTitle = $('li.nav-branding');
        $(brandingTitle).on("click", function () {
            $scope.showFeesTitle = false;
            $scope.showSettingsTitle = false;
            $scope.showBrandingTitle = true;

        });

    };
    $scope.settingsTitleToggle = function () {
        var editorTitle = $('li.nav-editor');
        $(editorTitle).on("click", function () {
            $scope.showBrandingTitle = false;
            $scope.showFeesTitle = false;
            $scope.showSettingsTitle = true;

        });

    };
    $scope.feeTitleToggle = function (index) {
        var feesTitle = $('li.nav-fees');
        $(feesTitle).on("click", function (index) {
            $scope.showFeeTitle = false;
            $scope.showBrandingTitle = false;
            $scope.showSettingsTitle = false;
        });
    };

HTML

<ul class="list-inline">
            <li>What would you like to Do?</li>
            <li ui-sref-active="active" class="nav-branding"
                data-toggle="tooltip" data-placement="bottom"
                tooltip="Use this tool to Customize the Brand of your program"
                tooltip-placement="bottom">
                <a data-ng-click="brandingTitleToggle()" ui-sref="branding({ organizationId: organizationId, programId:programId })">Branding<span></span></a>
            </li>
            <li ui-sref-active="active" class="nav-editor"
                data-toggle="tooltip" data-placement="bottom"
                tooltip="Use this tool to Customize the Program"
                tooltip-placement="bottom">
                <a data-ng-click="settingsTitleToggle()" ui-sref="program-editor({ organizationId: organizationId, programId:programId })">Program Editor<span></span></a>
            </li>
            <li ui-sref-active="active" class="nav-fees"
                data-toggle="tooltip" data-placement="bottom"
                tooltip="Use this tool to add a fee to you program"
                tooltip-placement="bottom">
            <a data-ng-click="feeTitleToggle($index, $event)" ui-sref="fees({ organizationId: organizationId, programId:programId })">Program Fees<span></span></a>
            </li>
            <li data-ng-show="showBrandingTitle"><span class="navIconFade">branding settings</span></li>
            <li data-ng-show="showSettingsTitle"><span class="navIconFade">Program settings</span></li>
            <li data-ng-show="showFeeTitle"><span class="navIconFade">fee settings</span></li>
        </ul>

Answer 1

你有拼写错误

$scope.showFeesTitle = false;

应该是：

$scope.showFeeTitle = false;

AngularJS ng-show函数，某些show / hide不能正常工作

1 个答案: