1

Hola tengo varios divs que se crean dinámicamente, es decir, no están inicialmente en el código sino que con angular ng-repeat se crean varios divs con la clase box-header quisiera cambiar sus propiedades cada vez que le hago clic pero no funciona, el código en otra plantilla HTML si funciona bien pero en este caso no. ¿Me podría decir alguien que estoy haciendo mal?

mi script.js dice lo siguiente;

    var open = 0;
$('#este').click(function () {
    if (open === 0) {
        $('#este').css({
            'border-radius': '0px 0px 43px 43px / 0px 22px 40px 40px',
            'background-color': '#555454',
            'color': 'white',            
            'margin-top': '5%',
            'padding': '3px',
        });
        open = 1;
    }  else {
        if (open===1) {
            $('#este').css({
                'border-radius': '0px 0px 43px 43px / 0px 22px 40px 40px;',
                'background-color': 'white',
                'color': 'black',
                'margin-top': '5%',
                'padding': '3px'
            });
            open=0;}
    }
});

Y el HTML que genera las listas:

       <div class="row" style="display:block; margin-top:-95px" ng-controller="lista_claves">
           <center>
            <div class="col-xs-12">
 <div class="box box-solid collapsed-box" id="oficinas" ng-repeat="item in claves">
//aqui hago click para cambiar propiedad --> <div  class="box-header" data-widget="collapse">
      <img class="liq" src="css/galeria/zoom.png" style="float:left; width:14px; height:18px; margin-left:2%; margin-top: 3%"/>
                                <h2  class="box-title cortar" id="target2"  style="float:left; margin-left:2%;"> {{item.documentos}} </h2>
                                <img class="change4" src="css/galeria/down.png" style="float:right; width:7%;margin-right: 5%; margin-top: 4%;" />
     </div>
                            <div class="box-body" id="uniq" ng-controller="detalle_referenciacontrol">

                                <input type="text" id="twit" ng-model="searchinput" readonly value="{{item.descripcion}}" placeholder="{{item.descripcion}}" cloack  />      
                                <center>
                                    <table class="table table-hover" style="margin:auto">
                                        <tbody>
                                            <tr style="float:left;" ng-repeat="item in itemsarchivo | filter:{tipodescrip:searchinput}" id="{{item.path}}" onclick="ver(this)">
                                                <td><b class="cortar" style="float:left;">{{item.nombre}}</b><img src="css/galeria/doc.png" style="float:right"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </center>
                            </div>
                        </div>
                    </div>
                </center>
            </div>
2
  • aun no has podido resolver tu pregunta?
    – zerokira
    el 9 ago. 2018 a las 13:16
  • Aun no eh podido resolver, arme un controlador pero solo cambia un elemento de los que tengo :(
    – emanuelle
    el 9 ago. 2018 a las 14:45

3 respuestas 3

2

De acuerdo a lo que logro entender según tu pregunta lo que quieres hacer es agregar propiedades css a un item cuando este true o en su defecto false, para esto yo te recomiendo hacer uso de ng-class de angularJs agregando una clase cuando sea true o agregando otra cuando sea false, o no agregar ninguna clase, a continuación veras un ejemplo para que te hagas una IDEA de como funciona y como puedes trabajarlo, lo que no entiendas me preguntas.

var app = angular.module("myApp", []);
 
app.controller("myCtrl", function ($scope, $http) {
    
$scope.claves =  [
        {
            "documentos": "Sin clasificar (1)",
            "clave": "0",
            "descripcion": "Sin clasificar"
        },
        {
            "documentos": "Pedimento Aduanal (3)",
            "clave": "2",
            "descripcion": "Pedimento Aduanal"
        },
        {
            "documentos": "Facturas de Gastos (A cuenta de Terceros) (4)",
            "clave": "3",
            "descripcion": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "documentos": "Cuentas de Gastos MOZ (2)",
            "clave": "4",
            "descripcion": "Cuentas de Gastos MOZ"
        },
        {
            "documentos": "COVE (4)",
            "clave": "5",
            "descripcion": "COVE"
        },
        {
            "documentos": "Facturas de Mercancías (Compra de Mercancias) (1)",
            "clave": "6",
            "descripcion": "Facturas de Mercancías (Compra de Mercancias)"
        },
        {
            "documentos": "Guía aérea, conocimiento de embarque o carta de porte (1)",
            "clave": "25",
            "descripcion": "Guía aérea, conocimiento de embarque o carta de porte"
        }
    ]        
 });
<!DOCTYPE html>
<html>
   <head>
<!-- Plotly.js -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="scripts/app.js"></script>
        <style type="text/css" media="screen">
            .item-open {
                border-radius: 0px 0px 43px 43px / 0px 22px 40px 40px;
                background-color: #555454;
                  color: white;            
                  margin-top: 5%;
                  padding: 3px;
            }
            .item-close {
                border-radius: 0px 0px 43px 43px / 0px 22px 40px 40px;
                background-color: white;
                color: black;
                margin-top: 5%;
                padding: 3px;
            }
        </style>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
         <div class="row">
            <center>
                <div class="col-xs-12">
                    <div class="box box-solid collapsed-box" id="oficinas" ng-repeat="item in claves" style="width: 50px; height: 50px; background-color: red; margin-bottom: 50px;" ng-init="item.open = false">
                        <div class="box-header" data-widget="collapse" ng-click="item.open = !item.open" style="width: 50px; height: 50px; position: relative;" ng-class="{'item-open' : item.open}">
                            ejemplo
                        </div>
                    </div>
                </div>
            </center>
        </div>
    </body>
</html>

Lo que hice fue agregar un ng-init e iniciar una variable en false item.open = false, luego en el div hijo del ng-repeat agregamos el ng-click ng-click="item.open = !item.open" donde decimos que cuando le demos click a un item este va cambiar de false a true y aplicara la clase item-open, esto sucede en el ng-class "{'item-open' : item.open}" donde decimos que agregue la clase item-open cuando item.open sea true y si es false pues no agregue ninguna clase.

Otra cosa que puedes hacer es agregar el item-close al ng-class de esta manera ng-class="{'item-open' : item.open, 'item-close' : !item.open}" pero entonces todos los div del ng-repeat van a tener la clase item-close ya que la variable item.open es false ya que así lo tenemos en el ng-init="item.open = false".

Puedes revisar la documentación del ng-class

1
  • eres un crack funciono muy bien y es esactamente lo que buscaba, ahora mismo ando leyendo la documentacion del ng-class y me sirve para otros asuntos ademas! te lo agradezco mucho! @TheVicious
    – emanuelle
    el 9 ago. 2018 a las 19:56
2

Puedes hacer uso de la directiva ng-click

 //aqui hago click para cambiar propiedad 
 <div id="este"  class="box-header" data-widget="collapse" ng-click="myFunc($event,item)">

Dentro de tu Controller

angular.module('myApp', [])
.controller('lista_claves', ['$scope', function($scope) {
    $scope.open = 0;
    $scope.myFunc = function($event,item) {
    var elem = $event.currentTarget || $event.srcElement;
    if ($scope.open === 0) {
               $(elem).css({
                  'border-radius': '0px 0px 43px 43px / 0px 22px 40px 40px',
                  'background-color': '#555454',
                  'color': 'white',            
                  'margin-top': '5%',
                  'padding': '3px',
          });
    $scope.open = 1;
    }  else {
        if ($scope.open===1) {
            $(elem).css({
                'border-radius': '0px 0px 43px 43px / 0px 22px 40px 40px;',
                'background-color': 'white',
                'color': 'black',
                'margin-top': '5%',
                'padding': '3px'
            });
             $scope.open=0;
         }
    };
}]);
3
  • se ve genial voy a probarlo
    – emanuelle
    el 8 ago. 2018 a las 17:14
  • alli lo edite, cambie nombre de variables. el 8 ago. 2018 a las 17:15
  • Hola funciona pero solo funciona con el primer div a los demas les doy click y solo prende y apaga el primer div de los 8 que tengo , alguna sugerencia para que funcione con todos?
    – emanuelle
    el 8 ago. 2018 a las 17:23
0

Para utilizar eventos jQuery con elementos dinamicos, debes usar on(). Algo asi:

$('#oficinas').on('click', '.box-header', function () {
  if (open === 0) {
    $('#este').css({
        'border-radius': '0px 0px 43px 43px / 0px 22px 40px 40px',
        'background-color': '#555454',
        'color': 'white',            
        'margin-top': '5%',
        'padding': '3px',
    });
    open = 1;
  }  else {
    if (open===1) {
        $('#este').css({
            'border-radius': '0px 0px 43px 43px / 0px 22px 40px 40px;',
            'background-color': 'white',
            'color': 'black',
            'margin-top': '5%',
            'padding': '3px'
        });
        open=0;}
  }
});
1
  • hola @alanfcm lo intente de varias maneras y no funciono ):
    – emanuelle
    el 8 ago. 2018 a las 17:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.