根據函數返回值，角度顯示不顯示/隱藏

所以我的角度應用程序是一個龐然大物，所以我在這裏粘貼相關部分只是爲了看看在SO的角度大師是否可以找到任何可以幫助我的東西。根據函數返回值，角度顯示不顯示/隱藏

我有我的HTML代碼如下所示：

<span class='span_class' ng-show='{{showHideBasedOnFlag(id)}}'> 
    ...data... 
</span>

及其在角我有：

$scope.showHideBasedOnFlag = function(id) 
{ 

    var flag = getFlag(id); 
    if(flag == 1) return true; 
    if(flag == -1) return false; 
    return true; 
}

我有三個跨度，其中第一有1一個標誌，因此應該是如圖所示，另外兩個標記爲-1，所以應該隱藏。這可以在頁面加載時按預期工作（第一個範圍是show，另外兩個隱藏）。但是當我審視跨度2和3，他們的HTML代碼如下所示：

<span class='span_class ng-hide' ng-show="false">

所以我的第一個問題是：這是正常的ng-hide通過角爲ng-show得到補充以及要還存在？當我的代碼中有代碼ng-show='{{showHideBasedOnFlag(id)}}'時，兩者都會被添加。其次，更重要的是：我有一個按鈕，點擊後，將範圍2和3的標誌更新爲值1。發生這種情況後，我預計跨度顯示，他們沒有。然後我明確地調用了showHideBasedOnFlag函數和console.logged來確保函數返回了正確的true和false。但是，我的HTML DOM並沒有改變，跨度仍然隱藏。

我打破了這個念頭，並已用完了想法....任何幫助非常感謝！

來源

2016-07-31 Undefined Variable

刪除'{{}}'從你的代碼 – vinayakj

@vinayakj：試過了，沒有幫助:( –

NG秀髮生在一個表達式...像'NG-顯示=「myVar」'，其中myVar是真或假 – WalksAway

您使用雙括號進行插值。但ng-show不是插入值的指令，它是基於truthy/falsy的。因此，你需要一個功能，迄今爲止非常好。但是在Angular 1.x中，傳遞了一個沒有雙括號的函數的指令。

<span class='span_class' ng-show='showHideBasedOnFlag(id)'> 
    ...data... 
</span>

所以我的第一個問題是：是否有正常的NG-隱藏的話，被角以及爲NG-節目是也存在加？兩者都得到加入時，我有代碼NG秀= '{{showHideBasedOnFlag（ID）}}' 在我 HTML

是的，這是正常的行爲，作爲NG-展示和NG-隱藏的互補開關使用元素的可見性屬性，而ng-if完全添加或刪除DOM中的元素。

來源

2016-07-31 19:24:00

我刪除了雙括號，並嘗試，但沒有工作... –

當你封閉的功能{{}}那麼它得到解決，虛假（或任何初始值），只有第一次，因爲那是什麼表達式語法的用途。 ng-show/ng-hide預期是一個表達式，它將是true或false，所以最好使用一個函數或一些基於條件內部改變的變量。

請參閱下面的示例以供參考。

function TodoCtrl($scope) { 
 
    $scope.id; 
 
    
 
    $scope.showHideBasedOnFlag = function(id) { 
 
    var flag = getFlag(id); 
 
    if (flag == 1) return true; 
 
    if (flag == -1) return false; 
 
    return true; 
 
    } 
 

 
    function getFlag(id) { 
 
    return id; // just simulation 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <h2>Todo</h2> 
 
    <input placeholder="Enter 1 to show -1 to hide" ng-model="id"> 
 
    <div ng-controller="TodoCtrl"> 
 
    <span class='span_class' ng-show='showHideBasedOnFlag(id)'> 
 
    ...data... 
 
</span> 
 
    </div> 
 
</div>

來源

2016-07-31 19:37:43 vinayakj

你把''上面的'ngController' ...而不是3行，可以簡單地'函數中返回標誌！= -1'。 – developer033

@ developer033我保留了OP的原始代碼，所以他/她可以快速聯繫。確定OP可以重構代碼 – vinayakj

根據函數返回值，角度顯示不顯示/隱藏

回答

相關問題