1

Situación: Tengo un listado de registros que viene de la base de datos, en forma tradicional, que se muestra en una vista de Laravel (no es un listado que llega desde angular, es laravel puro). A esta viste le sume Angular JS para poder actualizar un "estado" que aparece en cada registro.(publicado/no publicado). Y estoy haciendo que al presionar un boton, cambie solo según este estado, sin refrescar la pagina. En el listado tengo ng-model="banner{{$id}}", para identificar cada registro. hasta ahi todo bien

Problema: En el controlador (donde me esta llegando ok el id del registro que quiero modificar) necesito cambiar el scope (banner{{$id}}) en true o false, según sea el caso.

Al controlador llega el id, pero no logro concatenarlo con el string "banner" para hacer este cambio del scope.

O sea, necesito hacer esto:

llega id= 25, entonces:

$scope.banner25=true;

Llega id=40 entonces $scope.banner40=true;

que dinamicamente entiendo seria algo asi:

$scope.+'banner'+$id=true;

Obviamente esto no funciona, por favor algun consejo.

introducir la descripción de la imagen aquí

la vista tiene este codigo:

    // boton PUBLICADO VERDE:
    <span ng-cloak ng-model="on{{$banner->bann_id}}" ng-init="on{{$banner->bann_id}}=true">
    <a  ng-if="on{{$banner->bann_id}}"  ng-click='nopublicar({{$banner->bann_id}})'><button class="btn btn-success active" >ON</button></a> </span>

    // boton NO PUBLICADO ROJO:
    <span ng-cloak ng-model="of{{$banner->bann_id}}" ng-init="of{{$banner->bann_id}}=false">
    <a  ng-if="of{{$banner->bann_id}}"  ng-click='publicar({{$banner->bann_id}})'><button ng-model="banner{{$banner->bann_id}}" class="btn btn-danger active">OFF</button></a> </span>
15
  • Cuál sería la condición para que la variable banner sea true o false? Commented el 3 sept. 2018 a las 15:54
  • Eso no es parte del problema, es una logica que ya tengo resuelta, el tema es que no puedo concatenar el string 'banner', mas un id que llega, para que todo eso se convierta en un scope que angular reconozca como válido.
    – rendor9
    Commented el 3 sept. 2018 a las 15:56
  • El problema es este, el siguiente codigo me da error: $scope.+'banner'+$id=true;
    – rendor9
    Commented el 3 sept. 2018 a las 15:59
  • Es que no entiendo la lógica o para que usarás ese string.. tengo entendido que un variable de tipo scope no se puede crear dinámicamente como lo requires, entonces quería entender lo que tratas de hacer para darle otro enfoque y resolver tu duda... Commented el 3 sept. 2018 a las 15:59
  • De esta manera angular tampoco lo acepta: $scope.'banner'+$id
    – rendor9
    Commented el 3 sept. 2018 a las 16:00

2 respuestas 2

0

Esto debería solucionar tu problema

var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function($scope){
  $scope.list = [
    { value: 1, name: 'Uno', published: false },
    { value: 2, name: 'Dos', published: true },
    { value: 3, name: 'Tres', published: false }
  ]
  
  $scope.publicar = function(id, state){
    var index = $scope.list.findIndex(x => x.value === id);
    $scope.list[index].published = state ? false : true;
  }
}])
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" ng-app="app" ng-controller="ctrl">
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th></th>
      </tr>
    </thead>
    
    <tbody>
      <tr ng-repeat="row in list">
        <td>{{row.value}}</td>
        <td>{{row.name}}</td>
        <td>
          <button type="button" class="btn btn-sm" ng-class="row.published ? 'btn-success' : 'btn-danger'" ng-click="publicar(row.value, row.published)">{{row.published ? 'ON' : 'OFF'}}</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

Nos comentas si es lo que necesitas!

4
  • me fijo Paulo, aunque vos estas iterando una array de angular con ng-repeat y yo uno de laravel con @foreach . Creoq ue el de angular genera un index para cada registro que es el que usa la solucion que estas aportando. Igual obviamente me fijo a ver si solucionamos por ese lado. gracias.
    – rendor9
    Commented el 3 sept. 2018 a las 17:01
  • como primer parámetro le envío el valor del elemento especificado en el array, ahora si quieres saltarte el findIndex, sólo debes reemplazar el row.value por $index.. me comentas como te va colega Commented el 3 sept. 2018 a las 17:07
  • Revise Paulo, no es lo que necesito pero quizas puedo hacer algo parecido, incorporando al scope un index por cada registro que tengo, entonces a la funcion del controlador le paso 2 parametros, el index del scope, para cambiar el boton y el id del registro para actualizar la db. Seria manejar dos id, uno para el boton con angular y otro para actualizar la tabla. Probando...
    – rendor9
    Commented el 3 sept. 2018 a las 17:11
  • recorda que estoy usando para iterar el listado un array de laravel, no de angular
    – rendor9
    Commented el 3 sept. 2018 a las 17:13
0

finalmente esta funcionando correctamente. Comparto la solución:

Desde la vista que contiene estos dos botones:

boton que despublica:

<span ng-cloak ng-model="on{{$banner->bann_id}}" ng-init="on{{$banner- 
>bann_id}}=true">
<a  ng-if="on{{$banner->bann_id}}"  ng-click="nopublicar('on{{$banner- 
>bann_id}}','of{{$banner->bann_id}}')"><button class="btn btn-success 
active" >ON</button></a> </span>

boton que publica:

<span ng-cloak ng-model="of{{$banner->bann_id}}" ng-init="of{{$banner- 
>bann_id}}=false">
<a  ng-if="of{{$banner->bann_id}}"  ng-click="publicar('of{{$banner- 
>bann_id}}','on{{$banner->bann_id}}')"><button ng- 
model="banner{{$banner->bann_id}}" class="btn btn-danger 
active">OFF</button></a> </span>  

Estoy pasando a una funcion angular dos parametros:

ng-click="publicar('of{{$banner->bann_id}}','on{{$banner->bann_id}}')"

que basicamente es pasarle los strings "on" y "of" concatenados con el ID del registro de la tabla mysql.

Hasta aqui tenemos dos parametros que llegan al controlador angular, y que ingresan con esta forma:

(on26,of26) (suponiendo que queremos modificar el registro 26 de la tabla mysql)

ahora separo, el "on", del id con:

//obtengo el id para trabajar con la base de datos
patron = "on",
nuevo = "",
$mi_id = $on.replace(patron, nuevo);

con esto ya tengo el id para actualizar la base de datos, haciendo alguna petición $http

y finalmente, y lo que me costo solucionar, actualizo el scope de ese boton en la vista utilizando el servicio $parse propio de AngularJS

Si la peticion $http es exitosa, paso a false el boton ya presionado.

Al parse ingresan los string 'of26' y 'on26' ya que el scope que deben modificar es $scope.of26 y $scope.on26

 $parse($of).assign($scope,false); //asigno false, asi desaparece el 
 boton OFF
 $parse($on).assign($scope,true); //asigno true, asi aparece el boton 
 ON.

Con esto queda funcionando perfectamente.

2
  • Por favor, marca tu respuesta como aceptada :)
    – Alfabravo
    Commented el 3 sept. 2018 a las 19:18
  • no me deja, me indica que puedo hacerlo en 2 dias.
    – rendor9
    Commented el 3 sept. 2018 a las 19:31

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.