javascript - 如何在执行 ng repeat 时生成具有默认值的数组属性？

Question

下面是我的数组:

$scope.parent.cars1 = ["Saab", "BMW"]; // There are more than 1000 records in this array

$scope.child.Cars1 = [];

现在我正在尝试将 $scope.parent.cars1 分配给 $scope.child.Cars1 但我想在我的 $scope 中有 3 个属性.child.Cars1 数组，即 name, operation 和 selected，默认情况下 operation 属性将为 1，selected 属性将为 true .

代码:

$scope.child = {};
if ($scope.child.Cars1 == undefined)
    $scope.child.Cars1 = [];

angular.forEach($scope.parent.Cars1, function(obj, key) {
    $scope.child.Cars1.push({
            name: obj,
            operation: 1, // this value is used to tick all radio button of clear and save
            selected: true // this value is used to check all checkbox to true by default
    });
})

现在，由于我的记录 $scope.parent.Cars1 包含数千条记录，因此我的浏览器挂起，因为我在我的计算机上使用此 $scope.child.Cars1查看以显示如下记录:

<tr ng-repeat="item in child.Cars1 | myfilter : searchitem">
     <td>
         <input ng-model="item.selected" type="checkbox" name="a{{$index}}" id="a{{$index}}">
     </td>
     <td>
          <div>
             <input type="radio" ng-model="item.operation" value="0" name="b{{$index }}" id="b{{$index}}">Clear
          </div>
          <div>
             <input type="radio" ng-model="item.operation" value="1" name="b{{$index }}" id="b{{$index}}">Clear and Save
          </div>
     </td>
 </tr>;

更新:我试图避免下面给出的过程，这样浏览器就不会因为大量记录而被挂起:

angular.forEach($scope.parent.Cars1, function(obj, key) {
        $scope.child.Cars1.push({
                name: obj,
                operation: 1, // this value is used to tick all radio button to true by default
                selected: true // this value is used to check all checkbox to true by default
        });
});

Plunker

使用@Bear plunker 会发生这种情况:

Answer 1

我已经更新并清理了我的 PLUNKER拥有真正的 8000 条记录...
我不得不说，如果你不使用分页或一些只在 DOM 中写入一定数量记录的技术，你的性能可能会很差。

作为改善性能的建议:

• 尝试在绑定(bind)数组之前在本地 vars 中做很多工作
• 使用整个数组的本地副本，只绑定(bind)屏幕中有限数量的记录。 (使用 javascript slice(start, end))
• 添加 按 $index 跟踪 ( angular docs ng-repeat )
• 当您使用 Angular 1.3+ 时，如果不需要，请禁用双向数据绑定(bind) (angularJs one-way data binding)

我的代码:

Controller JS:

var bigArray = ["Dandai", "Immātīn", "Oefatu" ...];
var itemsLocal = []; //Local copy of the items to work

var PAGE_SIZE = 250;
var TOTAL_RECORDS = bigArray.length;

var start = 0;
var end = PAGE_SIZE;

$scope.items = []; //Items to repeat in screen

$scope.loadData = loadData;
$scope.prevPage = prevPage;
$scope.nextPage = nextPage;

transformData();
loadData();

function transformData() {
    for (var i = 0; i < TOTAL_RECORDS; i++) {
      itemsLocal.push({
        name: bigArray[i],
        selected: true,
        operation: 1
      });
    }
}

function loadData() {
    $scope.items = itemsLocal.slice(start, end); //repeat only certain part of the data
}

function prevPage() {
    if (start < PAGE_SIZE) 
        return;

    start = start - PAGE_SIZE;
    end = end - PAGE_SIZE;
    loadData();
}


function nextPage() {
    if (end >= TOTAL_RECORDS) 
        return;

    start = start + PAGE_SIZE;
    end = end + PAGE_SIZE;
    loadData();
}

HTML:

<div>
    <button type="button" ng-click="prevPage()">Load Previous</button>
    <button type="button" ng-click="nextPage()">Load Next</button>
</div>

<hr/>

<table class="table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items track by $index">
        <td>
          <input ng-model="item.selected" type="checkbox"> {{ item.name }}
        </td>
        <td>
          <div>
            <input type="radio" class="radio-custom" ng-model="item.operation" value="0">Clear
          </div>
          <div>
            <input type="radio" class="radio-custom" ng-model="item.operation" value="1">Clear and Save
          </div>
        </td>
      </tr>
    </tbody>
</table>