作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试执行一项基本任务:从数组中删除一个项目。
数组看起来像这样:
myWordsInJSON = [{"eng":"frau","rus":"жена"},{"eng":"mann","rus":"муж"},{"eng":"witwe","rus":"вдова"},{"eng":"witwer","rus":"вдовец"},{"eng":"schwiegervater","rus":"свекор"}]
这是我的 html 代码:
<tr ng-repeat="item in myWordsInJSON">
<td>{{$index + 1}}</td>
<td>{{item[Params.lang1]}}</td>
<td>{{item[Params.lang2]}}</td>
<td><span class="label label-danger"
ng-click="cut({{$index}})">x</span>
</td>
</tr>
看起来很棒。当我按下“删除”标签时,我的 Controller 的剪切功能开始:
$scope.cut = function(index){
$scope.myWordsInJSON.splice(index,1);
if ($scope.myWordsInJSON.length == 1)
$scope.myWordsInJSON = [];
console.log('cuted, index =', index,$scope.myWordsInJSON);
};
但是奇怪的事情发生了。从数组开头剪切一些项目后,我得到了这张图片:
DOM 看起来很棒,我数组的最后一个元素是:
<tr ng-repeat="item in myWordsInJSON" class="ng-scope">
<td class="ng-pristine ng-untouched ng-valid ng-binding">2</td>
<td class="ng-binding">schwiegervater</td>
<td class="ng-binding">свекор</td>
<td><span class="label label-danger" ng-click="cut(1)">x</span>
</td>
</tr>
但是!!!当我按下这个元素时,它必须调用我的剪切函数,如
cut(1),什么也没有发生,在我的控制台中我看到
index = 4
这意味着我的函数正在获取 index=4 而不是 index=1
所以,看起来我的初始页面编译索引仍然在这里......我该如何解决这个问题?
更新!
通过使用“$index”而不是“{{$index}}”解决了该问题。沉入 valverde93 。但我仍然不明白为什么会发生这种情况)))也许有人可以解释一下?
最佳答案
我在当前的项目中遇到了同样的问题。问题在于重复元素的索引和该数组中对象的实际索引不同。
为了解决这个问题,我必须像这样传递对象的IDng-click="deleteForId(repeatedElement.id)
然后,在 deleteForId
函数中,我在数组中搜索该对象并获取其索引。只有那时我才打电话$scope.myObj.splice(index, 1);
关于javascript - 如何在 Angularjs 应用程序中删除数组中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29965154/
我是一名优秀的程序员,十分优秀!