Question

如果数组中有任何值，我会在向用户显示某些内容时尝试使用一次性绑定。

我正在使用此代码：

app.controller('MainCtrl', function($scope, $timeout) {
  loadHeroes = function() {
    $scope.heroes = ['Superman', 'Batman', 'Spider-Man'];
  };

  $timeout(loadHeroes, 5000);

});

而且：

<div ng-controller="MainCtrl">
  <pre ng-show="::heroes.length > 2">There are a few heroes!</pre>
  <pre>{{::heroes | json}}</pre>
</div>

这是Plunker：http://plnkr.co/edit/k1kxutLd8fOWSoXc81sk?p=preview

但是消息没有显示出来。我尝试在数组周围设置括号，但它也没有工作。

任何想法如何通过检查数组长度来实现一次性绑定？

Answer 1

使用ng-if：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  loadHeroes = function () {
    $scope.heroes = ['Superman', 'Batman', 'Spider-Man'];
  };
  
  $timeout(loadHeroes, 5000);
  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <pre ng-if="::heroes.length">There are a few heroes!</pre>
    <pre>{{::heroes | json}}</pre>
    
  </body>

</html>

它会“等待”设置变量。

http://plnkr.co/edit/SMBSMhMPUlRFaRBN0xtb?p=preview

Answer 2

虽然有些答案正在解决我的问题，但最好知道所述行为的实际原因是什么。

感谢用户@YOU提出的问题和澄清主题。下面是他对一些格式的解释。

因此，初始状态heroes为undefined，而AngularJS中heroes.length为undefined。在Javascript undefined > 2评估为false。但false为defined，因此Angular会在此时停止观看，ng-show获取false，因此它永远不会显示。

在这种情况下，解决方案可以是显式表达式ng-show="::heroes.length > 2 ? true : undefined"。

Answer 3

The syntax ::：

渲染数据一次，让它持续存在而不受未来的影响模型更新

$scope值未更新，因此$timeout后您的视图未更新。

删除此语法适用于ng-show http://jsfiddle.net/2ctyjfk0/：

angular.module('Joy', [])
    .controller('IfCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $timeout(function () {
        $scope.names = ['Joy', 'Elit', 'Carl'];
    }, 3000);
}]);

HTML：

<div ng-app="Joy">
    <div ng-controller="IfCtrl">
        <div ng-show="names">Names: {{ names | json }}</div>
    </div>
</div>

或者，您可以使用ng-if。它适用于您的情况，因为：

ngIf与ngShow和ngHide的不同之处在于ngIf完全删除并重新创建DOM中的元素...请注意，当使用ngIf删除元素时范围被销毁，并在元素恢复时创建新范围。

如果您可以选择删除/插入DOM元素，请选择ng-if。

AngularJS一次性绑定，检查数组长度

3 个答案: