Delete in associative array in AngularJS

Question

Delete in associative array in AngularJS

Navigation

#1 by (0 votes)

0

I need to delete a data in an Associative Array within a platform made in PHP with AngularJS. I have tried by all means and only erases me from back to front.

This is the platform I'm working on.

And the code:

controller.js

.controller('ProductosCtrl', function ($scope, $http) {
    $scope.productos = [];
    $scope.getProductos = function (cb) {
        var data = {
            services: "getProductos",
            token: token
        }

        $http({
            method: 'POST',
            url: service_url,
            data: Object.toparams(data),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function (response) {
            console.log(response);
            $scope.areas = response.data;
            if (cb) cb();
        });
    }
    $scope.getProductos();
    $scope.getServicios = function () {
        var data = {
            services: "getServicios",
            token: token
        };

        $http({
            method: 'POST',
            url: service_url,
            data: Object.toparams(data),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function (response) {
            console.log(response);
            $scope.servicios = response.data;
        });
    };
    $scope.getServicios();
    $scope.idservicioseleccionado = 0;
    $scope.nombreseleccionado = "";
    $scope.arrayTemporal = [];
    $scope.seleccionarServicio = function(idservicio, nombreservicio) {
        //console.log(idservicio, nombreservicio);
        $scope.servicios_seleccionados.push({
            serv_id: idservicio,
            serv_nombre: nombreservicio
        });
        var index = $scope.servicios.indexOf(idservicio);
        $scope.servicios.splice(index,1);
        console.log($scope.servicios);
    };
    $scope.quitarServicio = function() {
        var index = $scope.servicios_seleccionados.indexOf($scope.idservicioseleccionado);
        $scope.servicios_seleccionados.splice(index,1);
        console.log($scope.servicios_seleccionados);
    }
    $scope.seleccionarServicioBorrar = function(idservicio) {
        console.log(idservicio);
        $scope.idservicioseleccionado = idservicio;
    };
    $scope.servicios_seleccionados = [];

})

products.html

<section class="content-header">
    <h1>
        Productos
    </h1>
</section>
<section class="content-header">
 <div class="row">
    <div class="col-md-10">
        <div class="box box-info">
            <div class="box-body">
            <div class="col-md-4"> 
              <form role="form"> 
                <div class="form-group">
                  <label>Nombre del producto</label>
                  <input type="text" class="form-control" placeholder="...">
                </div>
                <div class="form-group">
                  <label>Asignar Valor</label>
                  <input type="text" class="form-control" placeholder="...">
                </div>
              </form>
            </div>
            <div class="col-md-4"> 
              <form role="form"> 
                <div class="form-group">
                  <label>Empresa</label>
                  <input type="text" class="form-control" placeholder="...">
                </div>
              </form>
            </div>
                    <div class="row">
                       <div class="col-sm-12">
                           <h4>Seleccione los servicios y arrastre a la columna derecha</h4>
                       </div>
                        <div class="col-sm-4">
                            <div class="box-body">
                                <!-- the events -->
                                <div id="external-events">
                                    <div class="external-event bg-yellow" ng-repeat="servicio in servicios">
                                        <div ng-click="seleccionarServicio(servicio.serv_id, servicio.serv_nombre)">{{ servicio.serv_nombre }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div style="border:1px solid grey; height: 300px;">
                                <div class="external-event bg-yellow" ng-repeat="item in servicios_seleccionados">
                                    <div ng-click="seleccionarServicioBorrar(item.serv_id)">{{ item.serv_nombre }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <a href="" class="btn btn-primary pull-right">Agregar</a>
                            <a href="" class="btn btn-primary pull-right">Quitar</a>
                        </div>
                    </div><!-- /.row -->
            </div><!-- /.box-body -->
        </div><!-- /.box-info-->
    </div><!--fin col-->
  </div><!--fin row-->
</section>

I appreciate your help ...

javascript php angularjs

asked by Roberto Caamaño Riquelme 03.07.2017 в 23:57

source

1 answer

Is it appropriate to handle controls based on your name? Help with minimax in OSO game

score 0 · Answer 1

assuming you have an array of this type:

$scope.servicios = [{serv_id : 1 , serv_nombre : 1 } ,{serv_id : 2 , serv_nombre : 2 }, {serv_id : 3 , serv_nombre : 3 }, {serv_id : 4 , serv_nombre : 4 }]

you can hide information and show in Angular, add filter; a simple example of how to do what you want without so much code and functions:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.servicios = [{'serv_id' : 1 , 'serv_nombre' : 1 } ,{'serv_id' : 2 , 'serv_nombre' : 2 }, {'serv_id' : 3 , 'serv_nombre' : 3 }, {'serv_id' : 4 , 'serv_nombre' : 4 }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="servicio in servicios">
      <div ng-if="servicio.seleccionado != true" ng-click="servicio.seleccionado = true">{{servicio.serv_nombre }}</div>
    </div>
    <br/>
    Servicios seleccionados
    <div ng-repeat="seleccionados in servicios">
      <div ng-if="seleccionados.seleccionado == true" ng-click="seleccionados.seleccionado = false">{{seleccionados.serv_nombre }}</div>
    </div>
  </div>