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

當我按原樣加載頁面時，單擊“設置”按鈕，將打開對話框。 如果然后我選中“隱藏小部件標題”復選框，然后單擊“提交”，則我添加的調試在控制台中顯示以下內容：

hideWidgetHeading的值：true

這告訴我$scope.$watch(...){...}函數中的代碼正在運行。

但是，如果我單擊“設置”按鈕，然后不選中“隱藏小部件標題”復選框，或者選中它並再次取消選中它，然后單擊“提交”，那么我將在控制台調試中得到相同的true值，指示$scope.$watch(...){...}函數中的代碼正在運行，無論'watched'元素是否更改。

問題

1. 如何確保$scope.$watch(...){...}僅在'watched'元素（即復選框）的值更改時才能運行？

2. 我實際上如何“調用”我添加的CSS，以隱藏要隱藏的特定HTML上的HTML元素？ 或如何使CSS“應用”到要隱藏的HTML元素？

編輯

我將復選框的HTML更改為：

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

根據建議，當我現在瀏覽至頁面並打開對話框時，它將按我的期望顯示小部件：

當我單擊小部件上的“設置”按鈕時，“配置項”對話框將在頁面頂部打開：

但是，當我選擇“隱藏小部件標題”復選框時，它實際上從對話框中隱藏了“標簽”標簽和輸入框：

我要隱藏的元素實際上顯示在打開對話框的頁面上，而不顯示在對話框本身上……但是我似乎無法弄清楚如何使用對話框上的控件隱藏該元素。 .. 有什么建議么？

Answer 1

因此，這應該可行，這甚至是其文檔中顯示的第一個示例 ，您的代碼將是：

<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);
}

我所說的關於function或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;
};

抱歉，我在命名var等時有點快，但是您應該在這里得到所需的東西。