在AngularJS模板中的条件逻辑

12 浏览
0 Comments

在AngularJS模板中的条件逻辑

我有一个类似于以下内容的Angular模板...\n

    来自头像
    由头像创建
        至头像
        25
        十二月
        {{message.title}}

\n我已经设置了一个JSfiddle来展示数据的绑定情况。\n我需要根据数据的内容，有条件地显示\"from\"、\"to\"和\"arrowTo\"的div。\n日志如下...\n

    \n

  • 如果数据中有一个\"from\"对象，则显示\"from\" div并绑定数据，但不显示\"createdBy\" div。

    • \n

  • 如果没有\"from\"对象，但有一个\"createdBy\"对象，则显示\"createdBy\" div并绑定数据。

    • \n

  • 如果数据中有一个\"to\"对象，则显示\"arrowTo\" div并绑定其数据。

    • \n

\n或者用简单的英语来说，如果有一个来源地址，则显示它，否则显示谁创建了记录，如果有一个目的地地址，则也显示它。\n我已经研究了使用ng-switch，但我认为我必须添加额外的标记，这会导致如果没有数据则留下一个空的div。此外，我还需要嵌套switch指令，我不确定是否会起作用。\n有什么想法吗？\n更新：\n如果我写自己的指令（如果我知道怎么写！），那么这里是一些伪代码来展示我希望如何使用它...\n

    模板来源在这里
    模板创建者在这里
    模板目的地在这里

\n如果函数/表达式求值为false，每个模板都会消失。

0

3 答案

0 Comments

问题的原因是 ng-hide 只是设置了 display:none，而没有从 DOM 中移除元素。在上面的示例中，即使显示了 "from"，"createdBy" 仍然会显示。只有在没有 from 地址的情况下才应该显示 "createdBy"。

解决方法是在 ng-show 中添加条件，以隐藏 "createdBy" 当 "from" 存在时。可以参考这个链接：jsfiddle.net/pGwRu/3

0
0 Comments

在AngularJS模板中，条件逻辑的问题出现的原因是需要根据特定的条件来加载不同的模板，并且不希望在DOM中加载空的div。解决方法是使用ngSwitch指令来实现条件逻辑，并且可以自定义指令来通过$http加载模板，并使用$compile将其注入到DOM中。

具体实现的代码如下：

HTML:

Directive:

app.directive('conditionalTemplate', function($http, $compile) {
   return {
      restrict: 'E',
      require: '^ngModel',
      link: function(sope, element, attrs, ctrl) {
        // 使用$http获取模板
        // 通过ctrl.$viewValue检查模型
        // 使用$compile编译模板
        // 使用element.replaceWith()替换元素
      }
   };
});

除了使用ngSwitch指令，也可以使用硬编码的模板（字符串），但这样会降低重用性。另外，还可以使用Angular UI IF指令来实现条件逻辑，但是需要注意该指令的工作原理。

，解决AngularJS模板中条件逻辑的问题的方法是使用ngSwitch指令或自定义指令，并可以使用$http加载模板，并使用$compile将其注入到DOM中。

0
0 Comments

AngularJS模板中的条件逻辑问题是因为版本问题导致的。在Angular 1.1.5版本中引入了ng-if指令，这是解决该问题的最佳方案。如果使用的是较旧的Angular版本，可以考虑使用angular-ui的ui-if指令。

除了ng-if指令之外，还可以考虑以下解决方法：

- Angular 1.1.5版本还引入了三元运算符。

- ng-switch指令可以在DOM中有条件地添加/删除元素。

- 可以使用ng-style指令有条件地加载背景图像。

下面是一个ng-if指令的示例代码，用于在HTML模板中实现条件显示：

myApp.directive('ngIf', function() {
    return {
        link: function(scope, element, attrs) {
            if(scope.$eval(attrs.ngIf)) {
                // remove '
'
                element.replaceWith(element.children())
            } else {
                element.replaceWith(' ')
            }
        }
    }
});



   

   

       
From: {{message.from.name}}

   
    
   

      
Created by: {{message.createdBy.name}}

   
    
   

      
To: {{message.to.name}}

上述代码中使用了replaceWith()方法来从DOM中移除不需要的内容。

另外，ng-style指令也可以用于有条件地加载背景图像，这样可以避免使用ng-show指令和自定义指令，从而减少DOM中的冗余标记。详细用法可以参考AngularJS官方文档。

需要注意的是，angular-ui的ui-if指令会监听条件/表达式的变化，而上述示例代码并没有这个功能。因此，如果条件/表达式发生变化，ng-if指令可能无法正确更新视图。

总结起来，ng-if指令是解决AngularJS模板中条件逻辑问题的最佳方案。如果使用较旧的Angular版本，可以考虑使用angular-ui的ui-if指令。此外，还可以使用ng-switch指令和ng-style指令来实现条件逻辑。

0