AngularJS模板中的if else语句


if else statement in AngularJS templates

我想在AngularJS模板中做一个条件。我从YouTube API获取视频列表。有些视频的比例是16:9，有些视频的比例是4:3。

我想提出这样的条件：

1
2
3
4
if video.yt$aspectRatio equals widescreen then
    element's attr height="270px"
else
    element's attr height="360px"

我正在使用ng-repeat迭代视频。不知道我该怎么处理这种情况：

  • 在作用域中添加函数？
  • 在模板中执行？
相关讨论

(以下angularjs 1.1.5版本不提供if/else)的功能。以下是一些你想要的选项是考虑到实现：

(跳到下面的更新(如果你是用# 5)欧版1.1.5大)

1。三元算子：

建议用"柯克的《cleanest的评论，这样做的方式，将三元算子的使用方法如下：

1
<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2。ng-switch指令：

可以使用下面这样的事情。

1
2
3
4
        <!-- code to render a large video block-->
   
   
        <!-- code to render the regular video block -->

3。ng-hide/ ng-show指令

另外，你也可以使用这门ng-show/ng-hide实际上都将产生大的和小的视频，然后隐藏在一个视频单元，满足一个条件和一ng-hideng-show显示满足条件。每一页你的在线操作系统实际上是绘制两个不同的元素。

4。另一个考虑是一个选项ng-class指令。

这可以使用如下。

1
    <!-- video block goes here -->

将上述基本large-video添加CSS类的div元素，如果是video.large还是。。。。。。。

更新：1.1.5 ngIf directive(角)5。ng-if指令：

在上面，你可以使用该版本的1.1.5ng-if指令。这将删除该元素所提供的报酬，如果表达的elementfalse和重新插入，如果在表达true回报的礼物。可以使用如下。

1
2
3
4
    <!-- code to render a large video block-->


    <!-- code to render the regular video block -->
相关讨论

在最新的版本(如角1.1.5)，他们有被称为ngIf包括条件指令。它是不同的，从中ngShow和ngHide元素是不是隐藏的，但不包括在所有的礼物。他们是非常有用的，它是昂贵的，但在创建组件：是不是二手

1
2
3
4
    <!-- code to render a large video block-->


    <!-- code to render the regular video block -->
相关讨论

三是以最清晰的方式这样做。

1
{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}
相关讨论

如果不是自己的角/其他功能提供的，但你可以得到它通过这个模块包括：

github.com https：／／／／NG - zachsnow elif

在它自己的话"，它只是简单的控制流指令集：吴吴-如果，如果和其他人，给的。"这是容易和直观的使用。

例子：

1
2
3
4
5
6
7
    ...


    ...


    ...
相关讨论

你可以使用你的video.yt$aspectRatio物业直接通过传递它通过过滤器和结合的结果，在你的模板的高度属性。

你会期待这样的事情：滤波器

1
2
3
4
5
6
7
8
9
app.filter('videoHeight', function () {
  return function (input) {
    if (input === 'widescreen') {
      return '270px';
    } else {
      return '360px';
    }
  };
});

和模板将是：

1
<video height={{video.yt$aspectRatio | videoHeight}}></video>
相关讨论

在这个案例，你想"计算"的像素值取决于一个对象的属性。

我会将这calculates功能在控制器的像素值。

在控制器：

1
2
3
4
$scope.GetHeight = function(aspect) {
   if(bla bla bla) return 270;
   return 360;
}

然后你就在你的模板中写：

1
element height="{{ GetHeight(aspect) }}px"

我同意，三元是非常干净的。看来它是非常需要的情境，somethings I或P或div显示表与表，所以我不选择的原因是明显的关联。使呼叫到函数的理想的或是typically案例：我在我做了这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
       
       
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
1
    <span ng-message="required" class="change">Date is required</span>

如果你可以使用上面的指令)。

这可能是.如果我不得不包括一部分的HTML语句，if I had to检查所有的变量都定义一个URL，我的产品。我做了以下的路和它似乎是灵活的方法。我希望它会是什么helpful。

在该部分的HTML模板

1
 

和typescript部分：

1
2
3
4
5
6
7
  produceFassungsLink(titel: string, iri: string) {
      if(titel !== undefined && iri !== undefined) {
         return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
      } else {
         return 'Linkinformation has not arrived yet';
      }
  }

感谢和最好的作为，

简

相关讨论