Angular ng-show不会根据函数返回值显示/隐藏

So my angular app is a behemoth, so I pasting the relevant parts here just to see if the Angular Gurus at SO can spot anything that can help me.

所以我的角度应用程序是一个庞然大物,所以我在这里粘贴相关部分只是为了看看SO的Angular Gurus是否能发现任何可以帮助我的东西。

I have my HTML code like so:

我有我的HTML代码:

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

And in Angular I have:

在Angular我有:

$scope.showHideBasedOnFlag = function(id)
{

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

I have three spans,in which the first has a flag of 1 and so should be shown, the other two have flag of -1 so should be hidden. This works as expected when the page loads (first span is show and other two are hidden). But when I examine span 2 and 3, their HTML code looks like follows:

我有三个跨度,其中第一个标志为1,因此应该显示,另外两个标志为-1,因此应该隐藏。当页面加载时(第一个跨度显示而其他两个被隐藏),这可以正常工作。但是当我检查第2和第3段时,它们的HTML代码如下所示:

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

So my first question is: Is it normal for ng-hide to get added by Angular as well as for ng-show to be also present? Both are getting added when I have the code ng-show='{{showHideBasedOnFlag(id)}}' in my HTML

所以我的第一个问题是:Angular和ng-show一起出现的ng-hide是否正常?当我在HTML中使用代码ng-show ='{{showHideBasedOnFlag(id)}}'时,两者都会被添加

Secondly and more importantly: I have a button which when clicked, updates the flags for span 2 and 3 to the value of 1. After this happens, I expected the spans to get shown, they did not. I then explicitly called the showHideBasedOnFlag function and console.logged to ensure that the correct true and false were returned by the function. However there is no change my HTML DOM and the spans remain hidden.

其次,更重要的是:我有一个按钮,当点击时,将span 2和3的标志更新为值1.在此之后,我预计会显示跨度,但他们没有。然后,我显式调用了showHideBasedOnFlag函数和console.logged,以确保函数返回正确的true和false。但是我的HTML DOM没有变化,并且跨度仍然隐藏。

I am breaking my head over this, and has run out of ideas.... Any help is greatly appreciated!!

我正在打破这个问题,并且已经没有想法......任何帮助都非常感谢!!

2 个解决方案

#1

You're interpolating with double brackets. But ng-show is not a directive that interpolates a value, it is truthy/falsy based. Therefore, you need a function, so far so good. But in Angular 1.x, directives that are passed a function as written without double brackets.

你用双括号插值。但ng-show不是插值的指令,它是基于truthy / falsy的。因此,你需要一个功能,到目前为止一切顺利。但是在Angular 1.x中,传递函数的指令在没有双括号的情况下写入。

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

So my first question is: Is it normal for ng-hide to get added by Angular as well as for ng-show to be also present? Both are getting added when I have the code ng-show='{{showHideBasedOnFlag(id)}}' in my HTML

所以我的第一个问题是:Angular和ng-show一起出现的ng-hide是否正常?当我在HTML中使用代码ng-show ='{{showHideBasedOnFlag(id)}}'时,两者都会被添加

Yes, this is normal behaviour, as ng-show and ng-hide are complementary switches using the element's visibility property, whereas ng-if add or removes the element from the DOM entirely.

是的,这是正常行为,因为ng-show和ng-hide是使用元素的visibility属性的互补开关,而ng-if完全添加或删除DOM中的元素。

2 个解决方案

#1

更多相关文章

随机推荐