正在更新来自AngularJS的html

Question

我正在尝试使用AngularJS学习基础知识，并尝试在数字足够大时使文本可见。它看起来像more（）函数只在第一次显示页面时调用一次。 lessThan3（）函数返回正确的值，但在尝试隐藏时不起作用。

AngularJS

function ApplicationController($scope,$interval) { 
    $scope.number = 0; 
    $interval(function() { 
     $scope.number++; 
    }, 1000); 

    $scope.lessThan3 = function(){ 
     return ($scope.number < 3); 
    } 
} 

的Html

Number: {{ number }} 
{{ lessThan3() }} 
<p ng-hide="{{ lessThan3 }}"> 
    Less than 3 
</p> 

链接代码：http://jsfiddle.net/bBaa2/71/

Answer 1

更改HTML代码：<p ng-hide="number > 3">Less than 3</p>或<p ng-hide="lessThan3()">Less than 3</p>如果你喜欢调用的方法

你没有在使用ng-hide/ng-show/ng-if /和其他类似的指令时需要数据绑定语法。

function ApplicationController($scope,$interval) { 
 
    
 
    $scope.number = 0; 
 
    
 
    $scope.testTimer = function() { 
 
     $interval(function() { 
 
      $scope.number++; 
 
     }, 1000); 
 
    }; 
 
    $scope.lessThan3 = function(){ 
 
     return ($scope.number > 3); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="ApplicationController"> 
 
    <pre>Number: {{ number }}</pre> 
 
    <button ng-click="testTimer()">Test Timer</button> 
 
    <p ng-show="lessThan3()"> 
 
    More than 3 
 
    </p> 
 
    <p ng-hide="lessThan3()"> 
 
    Less than 3 
 
    </p> 
 
</div>

Answer 2

这只是

<p ng-show="more()"> 

为的jsfiddle，或

<p ng-hide="lessThan3()"> 

对于这里的例子。

没有{{}}

Answer 3

语法不正确：

<p ng-hide="lessThan3()"> 

但要知道，我也觉得你的逻辑是不正确，如果我可以假设你正在尝试做的。当number大于3时，您希望隐藏该元素。或者至少更改该消息。

Answer 4

你需要改变你的HTML：

<div ng-app ng-controller="ApplicationController"> 
    <pre>Number: {{ number }}</pre> 
    <button ng-click="testTimer()">Test Timer</button> 

    <p ng-show="more()"> 
    More than 3 
    </p> 

    <p ng-hide="more()"> 
    Less than 3 
    </p> 
</div>