Skip to main content
adicionou 926 caracteres ao conteúdo
Fonte Link
Isa
  • 1,1mil
  • 3
  • 19
  • 42
<div class="modal fade" id="listagem-tarefas" tabindex="-1"
    role="dialog" aria-labelledby="listagem-tarefas" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="cadastro-tarefa">
            <form data-toggle="validator" role="form">
                <div class="modal-header">
                    <!--button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button-->
                    <h4 class="modal-title custom_align" id="Heading">Listagem de
                        Tarefas</h4>
                </div>
                <!--filtro tarefa -->
                <div
                    style="margin-top: 10px; margin-left: 10px; margin-bottom: 20px;">
                    <button type="submit" class="btn btn-primary btn-sm"
                        data-toggle="collapse"
                        data-target="#form-filtro-tarefa-em-atividade">Filtro</button>
                    <div class="collapse" id="form-filtro-tarefa-em-atividade"
                        style="margin-top: 20px; margin-right: 10px;">
                        <div class="form-group">
                            <label class="" for="orderBy">Código</label> <input
                                class="form-control" type="text" placeholder="Código da tarefa"
                                ng-model="criterioDeBuscaTarefaEmAtividades.codigo" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Nome</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descricao"
                                type="text" placeholder="Nome da tarefa" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Tipo</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descTipo"
                                type="text" placeholder="Tipo da tarefa" id="">

                        </div>
                    </div>
                </div>
                <div style="overflow: scroll; height: 400px;">
                    <table class="table table-sm table">
                        <thead>
                            <tr>
                                <th><a href="">Seleção</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('codigo')">Código</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('descricao')">Nome</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('tipo')">Tipo</a></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="tarefa in tarefas | filter:criterioDeBuscaTarefaEmAtividades | orderBy:criterioDeOrdenacaoTarefasEmAtividades:filtroDirecaoDaOrdenacao">
                                <td class="text-center">
                                    <div class="ckbox text-center">
                                        <input type="checkbox" class="checkbox-tarefas-em-atividades"
                                            ng-model="tarefa.selecionada"> <label
                                            for="checkbox1"></label>
                                    </div>
                                </td>
                                <th scope="row" class="text-center">{{tarefa.codigo}}</th>
                                <td>{{tarefa.descricao}}</td>
                                <td>{{tarefa.descTipo}}</td>

                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="flag-obrigatorio">
                        <button type="button" class="btn btn-primary btn-md"
                            ng-click="selecionarTarefas(tarefas)" data-dismiss="modal" id="">
                            <span class="glyphicon glyphicon-ok-sign"></span> Adicionar
                        </button>
                        <button type="button"
                            class="btn btn-primary btn-md limpa-tarefas-em-atividades"
                            data-dismiss="modal">
                            <span class="glyphicon glyphicon-ok-sign"></span> Voltar
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
</div>

Apliquei essa solução, o botão vem desabilitado, aí dou check e ele habilita, mas se eu desmarcar ele não desabilita novamente, e perde a validação.

 $scope.value = [];
    $scope.updateQuestionValue = function(tarefa){
        $scope.value = $scope.value || [];
        if(tarefa.selecionada){
            $scope.value.push(tarefa.value);
            $scope.value = _.uniq($scope.value);
        }else{
            $scope.value = _.without($scope.value, tarefa.value);
        }
    };

<input type="checkbox" class="checkbox-tarefas-em-atividades"
ng-model="tarefa.selecionada" ng-click="updateQuestionValue(tarefas)">

<button type="button" class="btn btn-primary btn-md" 
  ng-click="selecionarTarefas(tarefa)" data-dismiss="modal" id="" ng-
  disabled="value.length==0">
  <span class="glyphicon glyphicon-ok-sign"></span> 
  Adicionar
</button>
<div class="modal fade" id="listagem-tarefas" tabindex="-1"
    role="dialog" aria-labelledby="listagem-tarefas" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="cadastro-tarefa">
            <form data-toggle="validator" role="form">
                <div class="modal-header">
                    <!--button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button-->
                    <h4 class="modal-title custom_align" id="Heading">Listagem de
                        Tarefas</h4>
                </div>
                <!--filtro tarefa -->
                <div
                    style="margin-top: 10px; margin-left: 10px; margin-bottom: 20px;">
                    <button type="submit" class="btn btn-primary btn-sm"
                        data-toggle="collapse"
                        data-target="#form-filtro-tarefa-em-atividade">Filtro</button>
                    <div class="collapse" id="form-filtro-tarefa-em-atividade"
                        style="margin-top: 20px; margin-right: 10px;">
                        <div class="form-group">
                            <label class="" for="orderBy">Código</label> <input
                                class="form-control" type="text" placeholder="Código da tarefa"
                                ng-model="criterioDeBuscaTarefaEmAtividades.codigo" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Nome</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descricao"
                                type="text" placeholder="Nome da tarefa" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Tipo</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descTipo"
                                type="text" placeholder="Tipo da tarefa" id="">

                        </div>
                    </div>
                </div>
                <div style="overflow: scroll; height: 400px;">
                    <table class="table table-sm table">
                        <thead>
                            <tr>
                                <th><a href="">Seleção</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('codigo')">Código</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('descricao')">Nome</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('tipo')">Tipo</a></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="tarefa in tarefas | filter:criterioDeBuscaTarefaEmAtividades | orderBy:criterioDeOrdenacaoTarefasEmAtividades:filtroDirecaoDaOrdenacao">
                                <td class="text-center">
                                    <div class="ckbox text-center">
                                        <input type="checkbox" class="checkbox-tarefas-em-atividades"
                                            ng-model="tarefa.selecionada"> <label
                                            for="checkbox1"></label>
                                    </div>
                                </td>
                                <th scope="row" class="text-center">{{tarefa.codigo}}</th>
                                <td>{{tarefa.descricao}}</td>
                                <td>{{tarefa.descTipo}}</td>

                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="flag-obrigatorio">
                        <button type="button" class="btn btn-primary btn-md"
                            ng-click="selecionarTarefas(tarefas)" data-dismiss="modal" id="">
                            <span class="glyphicon glyphicon-ok-sign"></span> Adicionar
                        </button>
                        <button type="button"
                            class="btn btn-primary btn-md limpa-tarefas-em-atividades"
                            data-dismiss="modal">
                            <span class="glyphicon glyphicon-ok-sign"></span> Voltar
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
</div>
<div class="modal fade" id="listagem-tarefas" tabindex="-1"
    role="dialog" aria-labelledby="listagem-tarefas" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="cadastro-tarefa">
            <form data-toggle="validator" role="form">
                <div class="modal-header">
                    <!--button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button-->
                    <h4 class="modal-title custom_align" id="Heading">Listagem de
                        Tarefas</h4>
                </div>
                <!--filtro tarefa -->
                <div
                    style="margin-top: 10px; margin-left: 10px; margin-bottom: 20px;">
                    <button type="submit" class="btn btn-primary btn-sm"
                        data-toggle="collapse"
                        data-target="#form-filtro-tarefa-em-atividade">Filtro</button>
                    <div class="collapse" id="form-filtro-tarefa-em-atividade"
                        style="margin-top: 20px; margin-right: 10px;">
                        <div class="form-group">
                            <label class="" for="orderBy">Código</label> <input
                                class="form-control" type="text" placeholder="Código da tarefa"
                                ng-model="criterioDeBuscaTarefaEmAtividades.codigo" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Nome</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descricao"
                                type="text" placeholder="Nome da tarefa" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Tipo</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descTipo"
                                type="text" placeholder="Tipo da tarefa" id="">

                        </div>
                    </div>
                </div>
                <div style="overflow: scroll; height: 400px;">
                    <table class="table table-sm table">
                        <thead>
                            <tr>
                                <th><a href="">Seleção</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('codigo')">Código</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('descricao')">Nome</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('tipo')">Tipo</a></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="tarefa in tarefas | filter:criterioDeBuscaTarefaEmAtividades | orderBy:criterioDeOrdenacaoTarefasEmAtividades:filtroDirecaoDaOrdenacao">
                                <td class="text-center">
                                    <div class="ckbox text-center">
                                        <input type="checkbox" class="checkbox-tarefas-em-atividades"
                                            ng-model="tarefa.selecionada"> <label
                                            for="checkbox1"></label>
                                    </div>
                                </td>
                                <th scope="row" class="text-center">{{tarefa.codigo}}</th>
                                <td>{{tarefa.descricao}}</td>
                                <td>{{tarefa.descTipo}}</td>

                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="flag-obrigatorio">
                        <button type="button" class="btn btn-primary btn-md"
                            ng-click="selecionarTarefas(tarefas)" data-dismiss="modal" id="">
                            <span class="glyphicon glyphicon-ok-sign"></span> Adicionar
                        </button>
                        <button type="button"
                            class="btn btn-primary btn-md limpa-tarefas-em-atividades"
                            data-dismiss="modal">
                            <span class="glyphicon glyphicon-ok-sign"></span> Voltar
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

Apliquei essa solução, o botão vem desabilitado, aí dou check e ele habilita, mas se eu desmarcar ele não desabilita novamente, e perde a validação.

 $scope.value = [];
    $scope.updateQuestionValue = function(tarefa){
        $scope.value = $scope.value || [];
        if(tarefa.selecionada){
            $scope.value.push(tarefa.value);
            $scope.value = _.uniq($scope.value);
        }else{
            $scope.value = _.without($scope.value, tarefa.value);
        }
    };

<input type="checkbox" class="checkbox-tarefas-em-atividades"
ng-model="tarefa.selecionada" ng-click="updateQuestionValue(tarefas)">

<button type="button" class="btn btn-primary btn-md" 
  ng-click="selecionarTarefas(tarefa)" data-dismiss="modal" id="" ng-
  disabled="value.length==0">
  <span class="glyphicon glyphicon-ok-sign"></span> 
  Adicionar
</button>
Fonte Link
Isa
  • 1,1mil
  • 3
  • 19
  • 42

Como fazer validação checkbox no angular

Preciso que o botão adicionar só seja ativado caso tenha sido checado pelo menos 1 item da lista. Para inputs text, eu usei o ng-required="true"

<div class="modal fade" id="listagem-tarefas" tabindex="-1"
    role="dialog" aria-labelledby="listagem-tarefas" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="cadastro-tarefa">
            <form data-toggle="validator" role="form">
                <div class="modal-header">
                    <!--button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button-->
                    <h4 class="modal-title custom_align" id="Heading">Listagem de
                        Tarefas</h4>
                </div>
                <!--filtro tarefa -->
                <div
                    style="margin-top: 10px; margin-left: 10px; margin-bottom: 20px;">
                    <button type="submit" class="btn btn-primary btn-sm"
                        data-toggle="collapse"
                        data-target="#form-filtro-tarefa-em-atividade">Filtro</button>
                    <div class="collapse" id="form-filtro-tarefa-em-atividade"
                        style="margin-top: 20px; margin-right: 10px;">
                        <div class="form-group">
                            <label class="" for="orderBy">Código</label> <input
                                class="form-control" type="text" placeholder="Código da tarefa"
                                ng-model="criterioDeBuscaTarefaEmAtividades.codigo" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Nome</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descricao"
                                type="text" placeholder="Nome da tarefa" id="">

                        </div>
                        <div class="form-group">
                            <label class="" for="orderBy">Tipo</label> <input
                                class="form-control" ng-model="criterioDeBuscaTarefaEmAtividades.descTipo"
                                type="text" placeholder="Tipo da tarefa" id="">

                        </div>
                    </div>
                </div>
                <div style="overflow: scroll; height: 400px;">
                    <table class="table table-sm table">
                        <thead>
                            <tr>
                                <th><a href="">Seleção</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('codigo')">Código</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('descricao')">Nome</a></th>
                                <th><a href="" ng-click="filtroOrdenarPor('tipo')">Tipo</a></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="tarefa in tarefas | filter:criterioDeBuscaTarefaEmAtividades | orderBy:criterioDeOrdenacaoTarefasEmAtividades:filtroDirecaoDaOrdenacao">
                                <td class="text-center">
                                    <div class="ckbox text-center">
                                        <input type="checkbox" class="checkbox-tarefas-em-atividades"
                                            ng-model="tarefa.selecionada"> <label
                                            for="checkbox1"></label>
                                    </div>
                                </td>
                                <th scope="row" class="text-center">{{tarefa.codigo}}</th>
                                <td>{{tarefa.descricao}}</td>
                                <td>{{tarefa.descTipo}}</td>

                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="flag-obrigatorio">
                        <button type="button" class="btn btn-primary btn-md"
                            ng-click="selecionarTarefas(tarefas)" data-dismiss="modal" id="">
                            <span class="glyphicon glyphicon-ok-sign"></span> Adicionar
                        </button>
                        <button type="button"
                            class="btn btn-primary btn-md limpa-tarefas-em-atividades"
                            data-dismiss="modal">
                            <span class="glyphicon glyphicon-ok-sign"></span> Voltar
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
</div>