1
resposta

Checkbox - Angularjs novo remover gmail

Olá gostaria de saber como faço para o checkbox efetuar os mesmos processos do novo gmail.

Passo 1 - Select all: seleciona todos Passo 2 - Logo após clicar sobre algum selecionado ( no caso tirar o check) aprece o icon de remover no select "pai".

Ao invés de selecionar todos ao clicar no icone remover eu gostaria de remover a seleção dos já selecionados.

https://material.angularjs.org/latest/demo/checkbox (SELECT ALL)

<div ng-controller="AppCtrl" class="md-padding demo checkboxdemoSelectAll" ng-app="MyApp">
  <div layout="row" layout-wrap="">
    <div flex="100" layout="column">
      <div>
       <fieldset class="demo-fieldset">
          <legend class="demo-legend">Using md-checkbox with the 'indeterminate' attribute </legend>
          <div layout="row" layout-wrap="" flex="">
          <div flex-xs="" flex="50">
            <md-checkbox aria-label="Select All" ng-checked="isChecked()" md-indeterminate="isIndeterminate()" ng-click="toggleAll()">
              <span ng-if="isChecked()">Un-</span>Select All
            </md-checkbox>
          </div>
            <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
              <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
               {{ item }}
              </md-checkbox>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
</div></div>
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope) {
  $scope.items = [1,2,3,4,5];
  $scope.selected = [1];
  $scope.toggle = function (item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
      list.splice(idx, 1);
    }
    else {
      list.push(item);
    }
  };

  $scope.exists = function (item, list) {
    return list.indexOf(item) > -1;
  };

  $scope.isIndeterminate = function() {
    return ($scope.selected.length !== 0 &&
        $scope.selected.length !== $scope.items.length);
  };

  $scope.isChecked = function() {
    return $scope.selected.length =! $scope.items.length;
  };

  $scope.toggleAll = function() {
    if ($scope.selected.length === $scope.items.length) {
      $scope.selected = [];
    } else if ($scope.selected.length === 0 || $scope.selected.length > 0) {
      $scope.selected = $scope.items.slice(0);
    }
  };
});
1 resposta

Fala Nicolle, tudo bom?

1- Você precisaria ter um array de objetos 2 - Quando clicar no select all, você faz um map passando por todos os itens desse array e jogando eles no $scope 3 - para cada item que você passar por meio do map, altere um atributo "selecionado", colocando sempre o contrário do valor anterior, algo como: meuItem.selecionado = !meuItem.selecionado 4 - Acredito que essa lógica pode funcionar :)