如何在AngularJS

时间:2017-04-06 14:41:25

标签: javascript angularjs

版本:1.5.5

我的范围内有两个数组,让我们调用它们:

$scope.array1 = [1,2,3,4];
$scope.array2 = [5,6,7,8];

我想根据条件修改其中一个数组,为此我想使用三元条件,因为我会在代码的不同部分对数组进行更改,因此我会避免多次重复这个条件:

var header = (myCondition)?$scope.array1:$scope.array2;
header = [];
header.push(10);
//some code
header.push(11);

但这不起作用! header上的更改未反映在$ scope中的对象上。

所以我必须这样做:

if(myCondition){
  $scope.array1 = [];
  $scope.array1.push(10);
}
else{
 $scope.array2 = [];
 $scope.array2.push(10);
}
//some code
if(myCondition){
 $scope.array1.push(11);
}
else{
 $scope.array2.push(11);
}

这看起来很糟糕......

我认为第一种方式应该真正起作用,因为header将保留对$ scope中对象的引用。无论如何,这是我的观点的虚拟代码,这是真正的代码(对不起,如果它很糟糕。我第一次使用Javascript):

$scope.getHeaders = function(type){
    req = createJsonedFilters(false, true, true);
    req['type'] = type;
    $http.post("/getHeaders", req).then(
        function(res){
            data = res.data;
            if(data['msg'] == "OK"){
                var minmax = (type == 'epidem')?"epidemMinMax":"entomoMinMax";
                var headers = (type == 'epidem')?$scope.epidemHeaders:$scope.entomoHeaders;
                headers = [];
                data_minmax = data[minmax]
                minmax_headers = Object.keys(data_minmax).sort();
                console.log(minmax_headers);
                for(var i=0; i < minmax_headers.length; i++){
                    var minmax_name = minmax_headers[i];
                    var mm_elem = data_minmax[minmax_name]
                    var atributo = {
                      name: minmax_name,
                      enabled: true,
                      slider: {minValue: parseInt(mm_elem['min']), maxValue: parseInt(mm_elem['max']),
                               options: {floor: parseInt(mm_elem['min']),ceil: parseInt(mm_elem['max']),
                               step: 1}}
                    };
                    headers.push(atributo);
                }
                console.log(headers);
                $scope.refreshAttributes();
            }
            else{
                console.log('Empty ' + type + ' Dataset...')
            }
        },
        function(){
            console.log("Couldn't load " + type + " headers...")
        }
    );
}

为什么对标题的引用不能修改范围内的对象的任何想法?如果有任何输出我可以给你,评论,我会更新问题。

2 个答案:

答案 0 :(得分:2)

数组是properties对象的$scope。因此,您可以使用key使用语法$scope[arrayName](其中arrayName是string)来访问它们。

因此,使用myCondition,您必须将要修改的数组的名称存储在您将在以下步骤中使用的变量中。

var arrayName = (myCondition) ? 'array1' : 'array2';
$scope[arrayName] = [];
$scope[arrayName].push(10);
//some code
$scope[arrayName].push(11);

修改

您的代码无法正常工作,因为您通过创建新数组($scope.array1)来删除对header = []的引用。

在完成所有操作后,您可以将header数组的内容复制到$scope的相应数组中。

var header = [];
header.push(10);
//some code
header.push(11);

if (myCondition) {
    $scope.array1 = header;
} else {
    $scope.array2 = header;
}

答案 1 :(得分:1)

为什么不能使用headers的引用是因为你通过

分配了适当的数组
var headers = (type == 'epidem')?$scope.epidemHeaders:$scope.entomoHeaders;

现在headers将保留$scope.epidemHeaders$scope.entomoHeaders数组的引用(因为数组也是对象)。

当您尝试通过headers将新数组分配到headers = []时。 headers现在包含新引用,而不是$scope.epidemHeaders$scope.entomoHeaders数组。即headers将指向不同的数组,而说$scope.epidemHeaders = [1,2,3,4]$scope.entomoHeaders = [5,6,7,8]

因此,在分配新数组后推送到headers不会将元素推送到$scope上的数组。实际上它增加了新的数组。因此没有反映出这些变化。

如果您仍想使用header参考方式,请尝试在不设置新数组的情况下推送元素。

或者如果您的情况是重置,请使用下面提到的方式:

var headers = (type == 'epidem')?$scope.epidemHeaders:$scope.entomoHeaders;
headers.length = 0; // Trick to reset the array retaining the same reference
headers.push(11);