2014-07-16 6 views
0

У меня есть список элементов с флажком, и у меня есть кнопка удаления. Удаление выполняется только в том случае, если отмечен элемент в списке.Удалить элемент из списка, если он установлен

Так, например, у меня есть

$scope.list = [{ 
      name:'Groceries', 
      check: false 
     }, { 
      name:'Laundry', 
      check:false 
     }, 
      { 
      name:'Cleaning', 
      check:false 
      }]; 

и в моем HTML

<ul> 
    <li ng-repeat="values in list"> 
     <input type="checkbox" ng-model="values.check"/> 
     <span>{{values.name}}</span> 
    </li> 
</ul> 

<button>Delete</button> 

Это только фрагмент кода я контроллер объявленного с бутстраповским с нг-приложением

+0

Итак, в чем вопрос? – Vinay

+0

@ Vinay Я хочу использовать кнопку «Удалить», чтобы удалить элементы с дисплея, только если они отмечены. – Raj

ответ

0

Вы должны использовать Угловую родную директиву ng-checked

<input type="checkbox" ng-checked="values.check"/> 
0

Вы можете использовать фильтр для этого:

HTML

<body ng-app="app" ng-controller='Ctrl'> 
    <ul> 
     <li ng-repeat="values in list"> 
      <input type="checkbox" ng-model="values.check"/> 
      <span>{{values.name}}</span> 
     </li> 
    </ul> 
    <button ng-click="remove((list | filter:{check:true}))">Delete</button> 
</body> 

Контроллер

$scope.remove = function(items) { 
    alert('removing ' + items.length + ' items'); 
    $scope.list = $filter('filter')($scope.list, { check: false}); 
} 

Demo Plunker

+0

сначала спасибо за ответ, но я хочу использовать кнопку удаления, чтобы удалить элемент с дисплея. В вашем случае после проверки его удаляет. – Raj

+0

Обновленный ответ. Надеюсь, я понял, что тебе нужно. – pixelbits

+0

да, это было не совсем верно, как фильтры снова помогли – Raj

0
<body ng-controller="MyController"> 
    <ul> 
     <li ng-repeat="values in list"> 
      <input type="checkbox" ng-model="values.check" /> 
      <span>{{values.name}}</span> 
     </li> 
    </ul> 

    <button ng-click="deleteItems()">Delete</button> 
</body> 

контроллер:

myApp.controller('MyController', function($scope, $filter) { 

    $scope.list = [ { 
     name : 'Groceries', 
     check : false 
    }, { 
     name : 'Laundry', 
     check : false 
    }, { 
     name : 'Cleaning', 
     check : false 
    } ]; 

    $scope.deleteItems = function() { 
     $scope.list = $filter('filter')($scope.list, {check : false}) 
    } 
}) 
Смежные вопросы