Angular - 拼接函数总是删除最后一个元素

2024-03-13

我有一个对象数组,我想在单击删除键时删除某些对象。但是,无论我创建了多少行,它总是从行数组中删除最后一项。即使我明确地放入这样的行 $scope.rows.splice(1,1) - 它仍然会删除最后一个元素,而不是第二个元素。

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) {

      }
    }
  });

相关的 HTML 片段

....
<button class="btn btn-default" ng-click="removeRqst($parent.row)" type="submit">Delete Row</button>
....

笨蛋:http://plnkr.co/edit/rDkXpIgiOSoNvLNPsVbP http://plnkr.co/edit/rDkXpIgiOSoNvLNPsVbP

测试:单击“添加行”3 次。然后单击第二行的删除。您会看到它实际上删除了第 3 行,而不是第 2 行


只是为了澄清@ZsoltGyöngyösi 给出的答案:

每个元素都带有 andid现场需求ng-model="$parent.row.field"

因此,如果您设置,正确的行将被删除queryRowTemplate.hml这边走:

查询行模板.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 />

请参阅 Plunkr,此处 http://plnkr.co/edit/IZN3XJMpJMyhrw1sEgOk?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular - 拼接函数总是删除最后一个元素 的相关文章

随机推荐