Question

我有一个带有无序键的数组，我想显示它们。问题是，即使没有设置键，角度也会为所有键重复它。

这是代码：

<div ng-controller="MyCtrl">
  Hello, {{a[10]}}!

    <p ng-repeat="b in a">
        1. {{b}}
    </p>
</div>

<script>
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.a = [];
    $scope.a[10] = "aaa";
}
</script>

这是输出：

Hello, aaa!
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1. aaa

我只想要设置为输出的数组键。没有空的请... here is a jsfiddle

Answer 1

从本质上讲，你的问题不是与AngularJS相关，而是JavaScript如何运作。

如果你有一个空数组并且你将一个元素分配给位置10，那么JavaScript会自动将数组大小调整为11个元素（因为数组索引从零开始）所以索引足够大以容纳你的元素。

您可以编写额外的代码来过滤空元素，但根据您编写的内容，我认为使用对象存储数据会更好。

为方便起见，我创建了一个plnkr：http://plnkr.co/edit/apRLuJr4zqS2zbMz322Q?p=preview

// Array
$scope.sampleArray = [];
$scope.sampleArray[10] = 'test';

// Object
$scope.sampleObject = {};
$scope.sampleObject[10] = 'test';

正如您所看到的语法非常相似，但输出完全不同。

通过使用对象，您将自动消除空行。

它还可以使您的代码更简单，因为您不必处理空数组元素。

希望有所帮助！

Answer 2

有很多方法可以在控制器内对阵列进行清理（例如，在$watch上使用a回调，只要它发生变化就会从中删除空元素。

这是一个使用在控制器中定义的简单自定义过滤器的解决方案：

function MyCtrl($scope) {
    $scope.namea = 'Superhero';
    $scope.a = [];
    $scope.a[10] = "aaa";

    $scope.myFilter = function(item){
        return item;
    }
}

<p ng-repeat="b in a | filter:myFilter">
  1. {{b}}
</p>

如filter文档中所述，“过滤器”过滤器可以采用以下功能：

function：谓词函数可用于写入任意过滤器。为数组的每个元素调用该函数。最终的结果是谓词返回true的那些元素的数组。

AngularJS：用键重复数组

2 个答案: