Angular中的ngRepeat使用心得

前段時間在實際項目中遇到一個問題，前端經過Ajax獲取到一段數據，其中包括一段整形數字，這個數字表示一個動態的業務值，而這個值是由客戶決定的。

OK，問題來了，我如今要使用ngRepeat來循環這個值，好比，客戶設置了10，那麼我就要循環10次，若是是12，就循環12次，咋一眼看上去並不難，可是如何用ngRepeat來循環呢?

咱們都知道，ngRepeat是循環一個數組或對象，好比像下面這樣

<tr ne-repeat='t in ["a", "b", "c"]'>
  //....
</tr>

可是若是隻給你一個值，如何弄呢？這個，我使用了過濾器來解決這個問題

具體看代碼：

過濾器代碼：

app.filter('range', function () {
    return function (total, input, step) {
            //定義步長
            var _step = (angular.isDefined(step) && angular.isNumber(step)) ? step : 1;

            if (angular.isNumber(input)) {
                var _input = parseInt(input);
                //若是步長爲1
                if (_step == 1) {
                    for (var i = 0; i < _input; i++) {
                        total.push(i+1);
                    }
                }
                //若是大於1
                if (_step > 1) {
                    for (var i = 0; i < _input; i += _step) {
                        total.push(i+1);
                    }
                }

            }
            return total;
        }
})

HTML中則是這樣：

<tr ng-repeat="n in [] | toRange : resultsData.tableNum">

resultsData.tableNum就是咱們拿到了數值，經過過濾器toRange，將拿到的數值轉換爲具備這個數值個數的數組，這個數組會自動賦值給空數組，做爲循環對象。