Angular - splice 函数总是删除最后一个元素 [英] Angular - splice function always removes last element
问题描述
我有一个对象数组,我想在单击 Delete 键时删除某些对象.但是,无论我创建了多少行,它总是从行数组中删除最后一项.即使我明确地放入这样的一行, $scope.rows.splice(1,1) - 它仍然会删除最后一个元素,而不是第二个.
JS
angular.module('app', ['ngAnimate', 'ui.bootstrap']).directive('queryBuilder', function() {返回 {限制:'E',范围: {},控制器:功能($范围){$scope.rows = [{}]$scope.$on('addRowRqst', function(evt) {//evt.stopPropagation()$scope.rows.push({})});$scope.$on('removeRowRqst', function(evt, args) {//evt.stopPropagation()//这是删除发生的地方$scope.rows.splice($scope.rows.indexOf(args),1);});},templateUrl: 'queryBuilderTemplate.html',}}).directive('queryRow', function() {返回 {范围: {},限制:'EA',templateUrl: 'queryRowTemplate.html',控制器:功能($范围){$scope.addRqst = function() {$scope.$emit('addRowRqst')};$scope.removeRqst = 函数(索引){$scope.$emit('removeRowRqst', index)};},链接:功能(范围,元素,属性){}}});
相关的 HTML 代码片段
<代码>....<button class="btn btn-default" ng-click="removeRqst($parent.row)" type="submit">删除行</button>....
Plunker:http://plnkr.co/edit/rDkXpIgiOSoNvLNPsVbP
测试:点击添加行 3 次.然后单击第二行的删除.您会看到它实际上删除了第 3 行,而不是第 2 行
只是为了清楚@ZsoltGyöngyösi 给出的答案:
<块引用>带有 id
字段的每个元素都需要 ng-model="$parent.row.field"
因此,如果您这样设置 queryRowTemplate.hml
,正确的行将被删除:
queryRowTemplate.html
<label for="selectedField">选择字段</label><select id="selectedField" class="form-control" ng-model="$parent.row.field"><option>title</option><option>应用</option><选项>主题</选项><option>文件类型</option></选择><div class="form-group col-md-3"><label for="logicalOperator">逻辑运算符</label><select id="logicalOperator" class="form-control" ng-model="$parent.row.logical"><option>等于</option><option>不等于</option></选择>
<div class="form-group col-md-3"><label for="searchText">搜索</label><input id="searchText" class="form-control" type="text" placeholder="search..." ng-model="$parent.row.search"/>
<div class="form-group col-md-3"><label for="operator">运算符(可选)</label><select id="operator" class="form-control" ng-model="$parent.row.operator"><option value=""></option><option>AND</option><option>OR</option></选择>
<button class="btn btn-default" ng-click="addRqst()" type="submit">添加行</button><button class="btn btn-default" ng-click="removeRqst($parent.row)" type="submit">删除行</button>{{$parent.$index}}<小时/>
I have an array of objects that I want to remove certain objects when a Delete key is clicked. However, it always removes the last item from the rows array, no matter how many rows I have created. Even if I explicitly put in a line like so, $scope.rows.splice(1,1) - it will still remove the last element, not the second.
JS
angular.module('app', ['ngAnimate', 'ui.bootstrap'])
.directive('queryBuilder', function() {
return {
restrict: 'E',
scope: {},
controller: function($scope) {
$scope.rows = [{}]
$scope.$on('addRowRqst', function(evt) {
// evt.stopPropagation()
$scope.rows.push({})
});
$scope.$on('removeRowRqst', function(evt, args) {
// evt.stopPropagation()
//THIS IS WHERE THE REMOVE HAPPENS
$scope.rows.splice($scope.rows.indexOf(args),1);
});
},
templateUrl: 'queryBuilderTemplate.html',
}
}).directive('queryRow', function() {
return {
scope: {},
restrict: 'EA',
templateUrl: 'queryRowTemplate.html',
controller: function($scope) {
$scope.addRqst = function() {
$scope.$emit('addRowRqst')
};
$scope.removeRqst = function(index) {
$scope.$emit('removeRowRqst', index)
};
},
link: function(scope, elem, attrs) {
}
}
});
The relevant snippet of HTML
....
<button class="btn btn-default" ng-click="removeRqst($parent.row)" type="submit">Delete Row</button>
....
Plunker: http://plnkr.co/edit/rDkXpIgiOSoNvLNPsVbP
Test: Click on Add Row 3 times. Then click on Delete on second row. You will see that it actually removes the 3 row, not 2nd
Just to be clear with the answer @ZsoltGyöngyösi gave:
Every element with and
id
field needsng-model="$parent.row.field"
Thus, the correct row will be deleted if you setup queryRowTemplate.hml
this way:
queryRowTemplate.html
<div class="form-group col-md-3">
<label for="selectedField">Select Field</label>
<select id="selectedField" class="form-control" ng-model="$parent.row.field">
<option>title</option>
<option>application</option>
<option>subject</option>
<option>filetype</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="logicalOperator">Logical Operator</label>
<select id="logicalOperator" class="form-control" ng-model="$parent.row.logical">
<option>equal to</option>
<option>not equal to</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="searchText">Search</label>
<input id="searchText" class="form-control" type="text" placeholder="search..." ng-model="$parent.row.search" />
</div>
<div class="form-group col-md-3">
<label for="operator">Operator (optional)</label>
<select id="operator" class="form-control" ng-model="$parent.row.operator">
<option value=""></option>
<option>AND</option>
<option>OR</option>
</select>
</div>
<button class="btn btn-default" ng-click="addRqst()" type="submit">Add Row</button>
<button class="btn btn-default" ng-click="removeRqst($parent.row)" type="submit">Delete Row</button>
{{$parent.$index}}
<hr />
这篇关于Angular - splice 函数总是删除最后一个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!