Question

说我有一个带有三个按钮的<nav>元素，以及一个包含三个<article>元素的<section>元素。我希望用户能够单击一个按钮，该按钮切换所有<section>元素的显示，使得只显示一个相关的<section>。

enter image description here

我是AngularJS的新手，并尝试通过提供导航元素ng-click属性和section元素{{1}来确定是否采用更直接的方式来实现此目的}属性。这感觉非常迫切。

我的HTML看起来像这样：

ng-show

我是在正确的轨道上，还是有一种让这更具说明性的方法？

Answer 1

我实际上建议尝试使用ng-hide而不是ng-show。这些指令大多数时间都完成相同的任务，但ng-hide默认为隐藏状态，然后您可以设置显示信息的参数。我遇到了一个与我正在处理角色的应用程序类似的问题，使用ng-hide似乎有助于简化我视图中的代码。

Answer 2

你要做的是正确的。

您可以执行redSectionShown = !!redSectionShown

，而无需在点击时切换值

或者，如果您要存储许多部分和其他数据，则创建一个服务来存储区域的可见状态，并创建可以切换值或使用值隐藏元素的指令。

第二种方法可以减少您的美元范围污染。

.service('ViewableRegions', function() {
    var viewablePropertiesMap = {};
    this.getValue = function(value) {
        return viewablePropertiesMap[value];
    }
    this.setValue = function(valueToUpdate, value) {
        viewablePropertiesMap[valueToUpdate] = value
    }
})

切换区域可见性的指令

.directive('regionToggler', function(ViewableRegions) {
        return {
            restrict: 'A',
            compile: function($element, $attrs) {
                var directiveName = this.name;
                var valueToUpdate = attrs[directiveName];

                return function(scope, element, attrs) {
                    element.on('click', function() {
                        var currentValue = ViewableRegions.getValue(ViewableRegions);
                        ViewableRegions.setValue(valueToUpdate, !!currentValue);
                        scope.$apply();
                    })
                };
            }
        };
    }
);

显示区域的指令

.directive('regionDisplayer', function(ViewableRegions) {
        return {
            restrict: 'A',
            compile: function($element, $attrs) {
                var directiveName = this.name;
                var valueToUpdate = attrs[directiveName];

                return function(scope, element, attrs) {
                    scope.$watch(
                        function() {
                            return ViewableRegions.getValue(ViewableRegions);
                        },
                        function(newVal) {
                            if (newVal) {
                                element[0].style.display = "none";
                            } else {
                                element[0].style.display = "";
                            }
                        }
                    )
                };
            }
        };
    }
);

HTML Uasge //等等。

<article>
    <section region-displayer="redSectionShown">
       // content; etc.
    </section>
    //etc.
</article>

Answer 3

您可以尝试以下方式：

<div ng-click="sectionToShow=1"></div>
<div ng-click="sectionToShow=2"></div>

<article>
    <section ng-show="sectionToShow==1"></section>
</article>

我还没有对此进行过测试，但没有理由不应该这样做。这样，您将自动只显示正确的部分，所有其他部分将自动隐藏自己。

使用ng-show指令切换多个元素？

3 个答案: