html - AngularJS-如何使用 ng-hide 隐藏元素？

Question

我有一个用 AngularJS 编写的应用程序，目前正在尝试添加功能，以在用户选择一个复选框以指示应隐藏它们时隐藏显示在其中一个网页上的某些小部件的标题。

目前，我有一个显示许多小部件的页面 - 在每个小部件的“标题”上，有一个“设置”按钮。当用户单击“设置”按钮时，会在当前页面顶部打开一个对话框(即用户不会导航到另一个页面——URL 根本不会改变)。该对话框包含一个带有多个输入字段的表单 - 其中一个是我想用来“隐藏”网页上所有小部件的标题的复选框。

我一直在关注以下示例:https://docs.angularjs.org/api/ng/directive/ngHide尝试这样做，但似乎无法让它正常工作......

我已将 ng-hide 属性添加到我的 HTML 元素中，如示例所示:

<div data-ng-if="widget.name === 'tag-box'" ng-hide="hideWidgetHeading"> <!-- class="ng-hide"-->
    <div class="divider"></div>
    ...

    <div class="divider"></div>
    <div class="row ui-checkbox-row">
        <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
        <div class="col-sm-8 col-xs-6">
            <label class="ui-checkbox">
                <input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="hideWidgetHeading()" ng-click="hideWidgetHeading()" ng-checked="hideWidgetHeading" ng-model="viewModel.hideWidgetHeading">
                <!-- ng-model="viewModel.hideWidgetHeading" -->
                <span></span>
            </label>
        </div>
    </div>
</div>

我在ctrl.js文件中定义了hideWidgetHeading()函数如下:

function hideWidgetHeading(){
    if($scope.widgetHeadingCheckbox==false) {
        $scope.$watch('noWidgetHeading', function() {
            $scope.hideWidgetHeading = true; 
            console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading);
        });
        return true; 
    } else {
        console.log("hideWidgetHeading() else called (Widget/ctrl.js line 440) ");
        $scope.$watch('noWidgetHeading', function() {
            $scope.hideWidgetHeading = false; //document.getElementById('noWidgetHeading');
        });
        return false; 
    }

    if($scope.hideWidgetHeading) {
        console.log("hideWidgetHeading is true- hide the widget heading: ");

    }
    return $scope.hideWidgetHeading;
}

并且我已将以下 CSS 添加到我的 widgets.scss 文件中:

.animate-show-hide.ng-hide {
  opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.umw-tag-box {
  opacity: 1;
}

当我按当前状态加载我的页面时，当我单击“设置”按钮时，对话框打开。如果我随后选中“隐藏小部件标题”复选框，然后单击提交，我添加的调试将在控制台中显示以下内容:

Value of hideWidgetHeading: true

这告诉我 $scope.$watch(...){...} 函数中的代码正在运行。

但是，如果我单击“设置”按钮，然后不选中“隐藏小部件标题”复选框，或者选中它并再次取消选中它，然后单击提交，我得到相同的 true 控制台调试中显示的值，这表明 $scope.$watch(...){...} 函数中的代码正在运行，无论 'watched' 元素是否发生变化还是不是。

问题

1. 如何确保 $scope.$watch(...){...} 中的代码仅在“watched”元素(即复选框)时运行它的值(value)改变了吗？

2. 我如何实际“调用”我添加的 CSS 来隐藏我想隐藏的特定 HTML 上的 HTML 元素？或者我如何让 CSS“应用”到我想隐藏的 HTML 元素？

编辑

我将复选框的 HTML 更改为:

<input type="checkbox" ng-model="checked" name="noWidgetHeading" id="noWidgetHeading">

按照建议，当我现在浏览到我的页面并打开对话框时，它会按我的预期显示小部件:

当我单击小部件上的“设置”按钮时，“配置元素”对话框会在页面顶部打开:

但是当我选择“隐藏小部件标题”复选框时，它实际上从对话框中隐藏了“标签”标签和输入框:

我想隐藏的元素实际上显示在打开对话框的页面上，而不是对话框本身......但我似乎无法弄清楚如何使用控件隐藏它对话框...有什么建议吗？

Answer 1

所以，这应该有效，它甚至是 first example shown in their docs ，您的代码将是:

<div data-ng-if="widget.name === 'tag-box'" ng-hide="viewModel.hideWidgetHeading"> <!-- class="ng-hide"-->
    <div class="divider"></div>
    ...

    <div class="divider"></div>
    <div class="row ui-checkbox-row">
        <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
        <div class="col-sm-8 col-xs-6">
            <label class="ui-checkbox">
                <input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="logWidgetHeading()" ng-click="logWidgetHeading()" ng-checked="viewModel.hideWidgetHeading" ng-model="viewModel.hideWidgetHeading">
                <!-- ng-model="viewModel.hideWidgetHeading" -->
                <span></span>
            </label>
        </div>
    </div>
</div>

如果你想记录值，你可以在事件上保留函数，但没有必要隐藏。 ng-model 指令将更新您的值，然后是 ng-hide。

function logWidgetHeading(){
    console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading);
}

我所说的关于函数或 var 的内容:在某些情况下，我曾经拥有未更新范围内的值，解决方案是引入一个函数来调用以检索该值。这是我认为你正在尝试的，因为 ng-hide="hideWidgetHeading" 显示与你的函数相同的名称:function hideWidgetHeading(){，这就是我首先说的原因圆括号不见了。所以另一个版本会是这样的(故意没有 ng-model，以展示用你的事件修改内容的替代方法):

<div data-ng-if="widget.name === 'tag-box'" ng-hide="getHideWidgetHeading()"> <!-- class="ng-hide"-->
    <div class="divider"></div>
    ...

    <div class="divider"></div>
    <div class="row ui-checkbox-row">
        <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
        <div class="col-sm-8 col-xs-6">
            <label class="ui-checkbox">
                <input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="toggleWidgetHeading()" ng-checked="isHiddenWidgetHeading">
                <!-- ng-model="viewModel.hideWidgetHeading" -->
                <span></span>
            </label>
        </div>
    </div>
</div>

和 js:

//initialisation to the default value:
$scope.isHiddenWidgetHeading = false;

//function that toggles the value:
$scope.toggleWidgetHeading = function(){
    $scope.isHiddenWidgetHeading = !$scope.isHiddenWidgetHeading;
};

//function to retreive the value:
$scope.getHideWidgetHeading = function(){
    return $scope.isHiddenWidgetHeading;
};

抱歉，我在命名 vars 等方面有点快，但你应该在这里得到你需要的东西..