javascript - Angular Scope，分隔数组，使它们不会发生碰撞

Question

我使用这个非常酷的isteven-multi-select，当我需要在两个不同的地方使用相同的下拉菜单时，我的问题发生了。问题是，当我改变一个时，另一个也会改变，反之亦然。

它们彼此无关，并且具有完全不同的变量名称、字段名称等。它们唯一共享的是我设置它们的位置。

let tempList = [
    {
        flag: "payCard.png",
        code: "Credit Card"
    },
    {
        flag: "payBank.png",
        code: "Bank Transfer"
    },
    etc..
]
$scope.paymentList = tempList;
$scope.FooBaa      = tempList;

即使你这个临时列表是在一个早已被遗忘的函数中远远设置的，他们仍然坚持共享它并互相复制。

但是!!!如果我这样做，那么它就会起作用......

let tempList = [
    {
        flag: "payCard.png",
        code: "Credit Card"
    },
    {
        flag: "payBank.png",
        code: "Bank Transfer"
    },
    etc..
]
$scope.paymentList = tempList;

let tempList2 = [
    {
        flag: "payCard.png",
        code: "Credit Card"
    },
    {
        flag: "payBank.png",
        code: "Bank Transfer"
    },
    etc..
]
$scope.FooBaa = tempList2;

有人能解释一下为什么吗？这对我来说完全是个谜，我已经煮了三个小时了。

Answer 1

数组是引用类型，因此您只需将 FooBaa 指向内存中同一个数组:

$scope.paymentList = tempList;
$scope.FooBaa      = tempList; // same exact array (not duplicated)

也许您想要一份副本:

$scope.paymentList = tempList;
$scope.FooBaa      = angular.copy(tempList);