Question

Buenas Tardes, estoy programando mi administración y tengo un problema: quiero capturar los valores de 3 campos en una row de mi tabla que genero de esta manera:

**<table class="table">
        <tr>
            <th>Frace</th>
            <th>Autor</th>
            <th>Banner</th>
            <th> </th>
            <th> </th>
        </tr>
        <tr ng-repeat="item in frase.listar" id="{{item.id}}">
            <td id="f{{item.id}}">{{item.frace}}</td>   
            <td id="a{{item.id}}">{{item.autor}}</td>   
            <td id="b{{item.id}}">{{item.id_banner}}</td>   
            <td><a id="{{item.id}}" onclick="editar(this.id)" data-toggle="modal" data-target="#dialogF" href=""><i class="fa fa-pencil-square-o"></i></a></td>
            <td><a id="{{item.id}}" onclick="drop(this.id);"><i class="fa fa-times"></i></a></td>
        </tr>
</table>**

y en ese mismo fichero tengo la función:

function editar(e){             
    $("#frase").val($("#f"+e).text());
    $("#autor").val($("#a"+e).text());    
}

pero entonces en la consola me sale que no conoce el método, entonces me imagino que será que angular internamente trata todo dentro del view del controller vinculado como que es de el solamente y por eso da error o como sea ;).
Entonces traté de hacerlo en el controller, estoy utilizando la guia de estilo de esta página https://github.com/johnpapa/angular-styleguide/blob/master/i18n/es-ES.md
y bueno aquí tienen el código de mi controller:

(function() {
    'use strict';

    angular
        .module('app')
        .controller('FraseController', FraseController);

    FraseController.$inject = ['FraseService','BannerService'];

    function FraseController(FraseService,BannerService) {
        var vm = this;

        vm.texto   = 'Frase Ocasional';
        vm.listar  = [];
        vm.lbanner = [];
        vm.CEditar = cargarEditar(e); // Este es el método que hice para cargar los datos seleccionados pero me da error pues no se como implementarlo para que sea llamado desde la view pasandole parámetros.

        activate();

        function cargarEditar(e){               
        $("#frase").val($("#f"+e).text());
            $("#autor").val($("#a"+e).text());    
    }

        function activate() {
            FraseService.getAll().then(function(response) {
                vm.listar = response.data.response;
            });
            BannerService.getAll().then(function(response) {
                vm.lbanner = response.data.response;
            });

        }
    }
}());

pues yo quiero cojer esos datos de mi row en la tabla y cargarlos en un modal y desde ahí editarlo entonces cuando guarde enviarlo por $http la actualización y refrescar mi pagina, pero no logró entender como pasarle parámetros a una función en controller desde la view.
Saludos Atentamente Dairon

Comments

Hola compañeros y compañeras.

Soy nuevo en angular y estoy tratando de vincularlo a Angular-Codeigniter.
Me puede, por favor ayudar, con una guía de como hacerlos funcionar?

Esta guía o el mismo procedimiento sirve tanto para CI como para Laravel 5.2?

Con el tema de Dairon que backend usa?

Gracias.

Quito.- Ecuador

---

@migueleonfer abre una pregunta con el problema que tienes y quieres solucionar. Expones tu código, el error que te da, lo explicas y así recibes ayuda para dar con la solución.

Saludos.

---

Hola @migueleonfer te recomiendo mirar el sitio https://uno-de-piera.com de ahí aprendí muchas cosas viene codeigniter y laravel + AngularJS aunque sería bueno que hiciera lo que dice @Peter y crees una pregunta con esta duda tuya para una mejor segmentación de información en el sitio y alguien con tu misma duda pueda avanzar.
Saludos Dairon

Answer 1

Ya resolví el problema de enviar datos a mi controller desde mi view de la siguiente forma:
En el HTML la tabla me quedó de la siguiente manera:

<div class="col-lg-12">
        <table class="table">
            <tr>
                <th>Frace</th>
                <th>Autor</th>
                <th>Banner</th>
                <th> </th>
                <th> </th>
            </tr>
            <tr ng-repeat="item in frase.listar" ng-model="vm.id" ng-value="{{item.id}}">
                <td>{{item.frace}}</td> 
                <td>{{item.autor}}</td> 
                <td>{{item.id_banner}}</td> 
                <td><a **ng-click="frase.edit(); frase.iden=item.id"** href=""><i class="fa fa-pencil-square-o"></i></a></td>
                <td><a><i class="fa fa-times"></i></a></td>
            </tr>
        </table>
    </div>

la parte en negrita lo que hace es ponerle al modelo iden que está dentro de mi controller el valor del id del item de la frase y luego cuando llame al método edit() que está en mi controller esta lamará a un servicio que me devolverá la frase a partir de su id para luego mostrarlo en un ngDialog donde me surgió otro problema que será tema de otra pregunta ;)

Answer 2

Epale Dairon,

Tienes varios errores importantes:

1. En los controladores no debes manipular DOM.
2. El ámbito de jQuery $ no entra en Angular... para poder obtener la referencia a un elemento debes usar angular.element.
3. Debes crear una directiva para obtener el valor que necesites, me imagino que por eso angular no detecta lo que haces.
4. Para los eventos click, debes usar la directiva ng-click es la manera "angular" de hacerlo, no debes usar "onclick", ni en angular ni en nada, ya que los evento js deben ir en un archivo separado, para que evites el acoplamiento y sea más mantenible tu app.
5. Por que no simplemente muestras, y construyes lo que necesitas usando $routeParams

Me comentaste que necesitabas hacer era un modal de Bootstrap, pues te recomiendo que uses la librería UI-Bootstrap más especificamente la directiva modal con ella puedes hacer lo que deseas y ya está lista para usar con Angular.

Ojalá te sea de utilidad.