Angular JS if-else没有按预期工作

时间:2017-07-22 12:19:23

标签: javascript angularjs

    <body ng-app ng-controller="progressCircleController">
<h1 class="errorHeader">List of Classes</h1>
<!-- Modal -->
<div id="progressModal" class="container" role="dialog">
    <form>
        <ul class="col-md-12 col-lg-12">
            <li ng-click="showErrorDetails(key)" class="col-sm-12 col-md-4 col-lg-4 eachClassCell"
                ng-repeat='(key,value) in sampleJSON'>
                <div ng-if="{{value.length}} <= 50">
                    <div title="{{key}}" class="progress green">{{key}}
                        <span class="progress-left">
                            <span class="progress-bar"></span>
                        </span>
                        <span class="progress-right">
                            <span class="progress-bar"></span>
                        </span>
                        <div class="progress-value">{{key}}</div>
                    </div>
                </div>
                <div ng-if="{{value.length}} >= 50">
                    <div title="{{key}}" class="progress red">{{key}}
                        <span class="progress-left">
                            <span class="progress-bar"></span>
                        </span>
                        <span class="progress-right">
                            <span class="progress-bar"></span>
                        </span>
                        <div class="progress-value">{{key}}</div>
                    </div>
                </div>
            </li>
        </ul>

    </form>
</div>
</body>

为每个密钥创建的进度循环是重复的。我需要根据每个键的value.length绘制进度圆,这样当value.length&gt;然后绘制红色圆圈和value.length&lt; = 50绘制绿色圆圈。

1 个答案:

答案 0 :(得分:0)

这是角度js版本问题。 我使用旧的角度js版本(1.0.7),我认为它不能识别><或任何逻辑运算符,它甚至不会在控制台中抛出任何错误。 使用角度JS版本1.2.29并且工作得很好。

并将div更改为<div ng-if="value.length <= 50">,因为它已经在角度上下文中。