Angular js内联表达式和条件

Question

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

情况

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

我的控制器

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

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

内联angular表达式和条件

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

我的目标是这里

{{ step | angular expression and condition }}

Answer 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>
....

Angular js内联表达式和条件

Angular js inline expression and condition

html

expression

conditional-statements

angularjs