【问题标题】:Remove checked row Angular删除选中的行 Angular
【发布时间】:2017-06-19 02:52:53
【问题描述】:

我有一个字段列表。用户可以添加行。如何制作一个删除选中行的函数?我正在考虑将它们添加到一个新数组中,但我不知道如何过滤所选项目。

http://plnkr.co/edit/S2tudP0kJcVUiKZKRa7j?p=preview

  <body ng-controller="DuplicateInputCtrl" class="container">
<div data-ng-repeat="food in foods">
  <div class="form-group title-field">
    <label for="">Food</label>
    <select class="form-control input-full" data-ng-model="food.Selection"
        data-ng-options="foodType.code as foodType.type for foodType in foodTypes">
        <option value="">Select</option>
    </select>
    <input type="hidden">
    <button data-ng-click="removeItem($index)" class="btn delete-field-{{$index}}">
      Delete
    </button>
  </div>
  <div class="form-group">

        <input style="background: white; color: black;" type="text" id="myInput"  class="form-control" data-ng-model="food.Text"/>

    </div>
</div>
{{foods | json}}
<button data-ng-click="cloneItem()" class="btn inline">
  Add
</button>    
    <button data-ng-click="" class="btn inline">
  Remove Selected
</button>  

谢谢!

【问题讨论】:

    标签: angularjs checkbox row


    【解决方案1】:

    你可以这样做

     $scope.removeSelected = function() {
                $scope.foods = $scope.foods.filter(function(food){
                    return !food.selected
                })
              }
    

    这是example

    【讨论】:

    • 非常感谢!但我想将它添加到新数组中,因为我想用另一个脚本来实现该脚本,为按下按钮“更新”的每一行生成一个条形码。但我怎么能只为选中的那个呢? plnkr.co/edit/v9ETdTA5dJhFl7IX0kpY?p=preview 因为最后我会做一个独特的按钮,在新窗口中打印选中行的条形码
    • 如果您只想删除它们,为什么要将所选项目添加到新数组中。我不太明白你说的是什么
    • 我不需要它,算了 :) 我只是认为它会有所帮助。无论如何,我想要的目标是:用户可以添加一些行。在所有表格的末尾,用户有 2 个按钮:PRINT SELECTED 和 REMOVE SELECTED。因此,如果用户检查 3 行,他可以删除(你向我展示了如何使用该功能)并且他可以打印这 3 行检查的条形码。现在,每次按下更新时,我制作的脚本都会为每一行创建条形码
    【解决方案2】:
    使用以下功能删除选定的按钮点击
    `$scope.removeSelectedItems = function () {
              for (var i = 0; i < $scope.foods.length; i++) {                 
                  if ($scope.foods[i].selected == true) {
                      $scope.foods.splice(i, 1);
                      i--; 
                  }
              }             
          }`
    

    【讨论】:

    • 谢谢!我喜欢这个。
    猜你喜欢
    • 2017-12-03
    • 2019-05-17
    • 1970-01-01
    • 2019-12-30
    • 2020-05-09
    • 2016-10-02
    • 1970-01-01
    • 1970-01-01
    • 2017-09-04
    相关资源
    最近更新 更多