AngularJS:如何修复范围覆盖?

时间:2017-02-05 16:37:18

标签: javascript angularjs

嗨我在我的控制器中有这样的功能:

var kl = 0;
    $scope.hashId = function (id_movie) {
        this.ld = kl;
        kl++;
        console.log(this.ld);
    }

在视图中使用html:

<ul ng-repeat="x in data">
    <li><a ng-init='hashId()' target='_blank' href='myHref'>{{ld}}+{{x}}</a></li>
</ul>

我想通过函数hashId()对这些链接进行编号; 在控制台中它正在工作,但是在视图中,我看到每个链接只有一个数字,范围被覆盖了最后一个值。 如何解决?

4 个答案:

答案 0 :(得分:0)

将该变量作为范围,如$ scope.kl = 0;然后在函数中使用$ scope.kl ++;。

答案 1 :(得分:0)

ld将引用相同的变量。这就是你看到最后一个价值的原因。

如果该功能只会增加,您可以使用$index

<ul ng-repeat="x in data">
    <li><a target='_blank' href='myHref'>{{$index}}+{{x}}</a></li>
</ul>

答案 2 :(得分:0)

返回哈希并将其设置为“本地”循环变量:

var kl = 0;
$scope.hashId = function (id_movie) {
    return kl++;
}

<ul ng-repeat="x in data" ng-init="id = hashId()">
    <li><a target='_blank' href='myHref'>{{id}}+{{x}}</a></li>
</ul>

答案 3 :(得分:0)

我想首先建议删除从未使用的参数&#34; id_movie&#34;。 要以更优雅的方式解决您的问题,只需将您的数组映射到更适合您的目的:

$scope.newData = data.map(function(item, index){
    return { ld : index, x : item };
});

然后,在newData上执行ng-repeat。 另外:请永远不要使用ng-init。尝试更好地理解角度如何编译其代码并将所有与渲染无关的逻辑放在控制器中。