Question

在ng-repeat内，我试图在变量中添加一些文字。

我这样做的真正原因是因为我有一个递归模板，我想继续添加到同一个变量。但是我在这里创建了一个简单的例子来展示我所遇到的问题的一部分，希望它可以帮助我解决其他问题。

我希望屏幕能够打印所有数字，然后是一个＆＃39; b＆＃39;每个，如

1b
2b
3b
...

相反，它打印出来

1bbbbbbbbbbb
2bbbbbbbbbbb
3bbbbbbbbbbb
...

为什么？

这是我的JSFiddle：http://jsfiddle.net/fd1f6yso/1/

Answer 1

{num = (num+'b')

您正在更新之前迭代的num参考以及添加＆＃39; b＆＃39;每次都要参加每次参考，并获得更新，如

1 +＆＃34; b＆＃34; =＆GT; 1b +＆＃34; b＆＃34; =＆GT; 1bb +＆＃34; b＆＃34;等等

2 +＆＃34; b＆＃34; =＆GT; 2b +＆＃34; b＆＃34; =＆GT; 2bb +＆＃34; b＆＃34;等等

所以不要只指定添加＆＃34; b＆＃34; ，像

(num+'b')

<强>演示

＆＃13;

var App = angular.module("App",[]);

App.controller("ctrl",function ($scope){
    $scope.myNum = 0;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="ctrl">
         <div ng-repeat="num in [1, 2, 3, 4, 5, 6]">
             <label>{{ (num+'b')}}</label>
         </div>
    </div>

＆＃13;

Answer 2

为什么？

因为默认情况下数据绑定的工作原理是：每次num变量的值发生变化时，都会重新计算表达式 - 再次更改num，然后再次更改b。最终它会停止;如果你检查了控制台，你已经看到很多＆＃39; 10 $ digest迭代已达到＆＃39;错误。这就是为什么你看到每行打印10 b的原因。

如果你想在每一步打印相同数量的<div ng-app="App" ng-controller="ctrl"> <div ng-repeat="num in [1, 2, 3, 4, 5, 6] track by $index"> <label>{{num + 'b'}}</label> </div> </div>，那么解决问题很容易：

如果你想构建某种金字塔，增加App.controller("ctrl",function ($scope){ $scope.myNum = 0; $scope.decorateWithB = function(num) { return num + Array(+num + 1).join('b'); }; }); <div ng-app="App" ng-controller="ctrl" ng-init="acc='b'"> <div ng-repeat="num in [1, 2, 3, 4, 5, 6] track by $index"> <label>{{decorateWithB(num)}}</label> </div> </div> - 计数，这有点棘手。这是一种可能的方法：

{{1}}

Demo

在Angular模板内（即在视图中）增量连接字符串

2 个答案: