javascript - 从 div angularjs 中删除生成的元素

Question

我想在单击删除按钮时删除条件列表项。现在只有过滤器正在刷新。这些表没有被删除。解决这个问题的建议。

• HTML

     <ul class="list-unstyled">
    <li style="display: inline-block" ng-repeat="crtia in newCriteria" >
      <table>
        <tr>
  
          <td>
            <select class="input-sm" ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select>
          </td>
          <td>
            <input class="input-sm " ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" ng-click="searchy.check()" />
          </td>
          <td>
         <button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" ng-click="removeCriteria($index)">
         <span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>
          </button>
          </td>
        </tr>
  
      </table>
    </li>
  </ul>
  

• JS

       $scope.removeCriteria=function($index){
        $scope.searchy.check();
        alert($index);
       $scope.newCriteria.splice($index,1);
        $scope.newList();         //Refreshes the filter
      }
  

Answer 1

试试这个

HTML

<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" data-ng-click="removeCriteria(crtia)">
   <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>

JS:

$scope.removeCriteria = function (sourceToRemove) {
    $scope.searchy.check();

    var index = $scope.newCriteria.indexOf(sourceToRemove);
    $scope.newCriteria.splice(index, 1);
    $scope.newList();         //Refreshes the filter
}

更新Plunker