Angular js内联表达式和条件答案

【问题标题】：Angular js inline expression and conditionAngular js内联表达式和条件
【发布时间】：2016-06-14 21:38:25
【问题描述】：

如何编写多个html 内联表达式和条件。

情况

{{step}} 值应在滚动时根据条件变化

我的控制器

controller(){
 $scope.step = 1;
  $scope.sectionOneValue   = 100;
  $scope.sectionTwoValue   = 200;
  $scope.sectionThreeValue = 300;

 scroll function(){
   $scope.scrollValue =  chaningValue
 }
}

内联角度表达式和条件

if scrollValue  > sectionOneValue 
   step = 1;
if scrollValue  > sectionTwoValue 
   step = 2;
if scrollValue  > sectionThreeValue 
   step = 3;

我的目标是这里

{{ step | angular expression and condition }}

【问题讨论】：

我很难理解你想要什么。但是每次更改scrollValue的值时，您都可以在控制器中更改step的值。或者使用基于scrollValue的当前值返回正确步长值的函数。
是否有可能编写内联多个表达式和条件？
这太模糊了，无法回答。但无论如何，JavaScript 代码属于控制器（或服务）。不为观。控制器的重点是提供可从视图调用/可用的函数和值。

标签： html angularjs expression conditional-statements

【解决方案1】：

您应该将所有使用数据的工作提取到控制器。

示例：

在控制器中：

$scope.getStep = function(scrollValue) {
    if (scrollValue > sectionOneValue) {
        return 1;
    } else if (scrollValue > sectionTwoValue) {
        return 2;
    } else if (scrollValue > sectionThreeValue) {
        return 3;
    }
}

在模板中：

.... //scrollValue initialized to this moment
<span ng-bind="getStep(scrollValue)"></span>
....

【讨论】：

任何可能编写内联多个表达式和条件
你可以在双花括号中写你想要的，但它看起来很难看：{{ scrollValue > sectionOneValue ? 1 : (scrollValue > sectionTwoValue ? 2 : (scrollValue > sectionThreeValue ? 3 : 0)) }}