Angularjs checkbox in ng-repeat table

Question

Im using angularjs to show a table from a json records with checkbox, and i have two problems:

First: I need all checkboxs true by default. Tested with ng-init but not working. Or just a button to toggle true-false all checkboxs

Second When uncheck a file, the object show quotes["", "", ""], but i need to show anything if not checked

view

<div ng-controller="TestController">
<table class="table table-striped">
                <tr>
                    <th>Seleccionar</th>
                    <th>Servicio</th>
                    <th>Detalle</th>
                    <th>Precio</th>
                </tr>
                <tr ng-repeat="(key, value) in listado">
                    <td><input type="checkbox" ng-model="ids[$index]" ng-true-value="{{value}}" ng-false-value="{{ undefined }}" ng-selected="checkAll"></td>
                    <td>{{ value.modelo }}</td>
                    <td>{{ value.detalle }}</td>
                    <td>{{ value.precio_in | currency:'$':0 }}</td>
                </tr>               
            </table>
            {{ ids | json }}

controller

var myApp = angular.module('myApp', [])
.controller('TestController', ['$scope', function ($scope) {

$scope.listado = [];
$scope.ids = [];

    $scope.listado = [ { "id_stock": "4", "oc_id": "4", "detalle": "Revisión de suspención", "cat_id": "16", "codigo": "m20.1", "marca": "", "parte": "", "precio_in": "5000", "id_prov": "1", "cantidad": "1", "id_bodega": "1", "nom_prov": "Proveedor de prueba 1", "modelo": "MECANIZADOS Y OTROS", "nombre": "Bodega Conchalí", "status": "EN BODEGA", "id_cat": "16" }, { "id_stock": "5", "oc_id": "4", "detalle": "Revisión de frenos", "cat_id": "16", "codigo": "m2.2", "marca": "", "parte": "", "precio_in": "4500", "id_prov": "1", "cantidad": "1", "id_bodega": "1", "nom_prov": "Proveedor de prueba 1", "modelo": "MECANIZADOS Y OTROS", "nombre": "Bodega Conchalí", "status": "EN BODEGA", "id_cat": "16" }, { "id_stock": "6", "oc_id": "4", "detalle": "Revisión de ruedas", "cat_id": "16", "codigo": "m20.3", "marca": "", "parte": "", "precio_in": "4500", "id_prov": "1", "cantidad": "1", "id_bodega": "1", "nom_prov": "Proveedor de prueba 1", "modelo": "MECANIZADOS Y OTROS", "nombre": "Bodega Conchalí", "status": "EN BODEGA", "id_cat": "16" }]; }]);

Check code http://jsfiddle.net/eCJ47/44/

Sorry for the english is not my native language. Thanks !!

You are assigning entire object to ng-model. Is that what you want? Wouldn't it be clean if you assign ng-true-value="{{value.id_stock}}" ? — Gowthaman
– Gowthaman, Commented Apr 18, 2018 at 2:28

Ininiv · Accepted Answer · 2018-04-18 02:40:07Z

5

Modified your code a bit, instead of assigning object to a new array, added a new property isSelected to the existing listado array and bind to the checkbox and initializing it as true by default.

            <tr ng-repeat="(key, value) in listado" ng-init="value.isSelected = true;">
                <td><input type="checkbox" ng-model="value.isSelected"></td>
                <td>{{ value.modelo }}</td>
                <td>{{ value.detalle }}</td>
                <td>{{ value.precio_in | currency:'$':0 }}</td>
            </tr>

Print listado to verify checkbox changes

Plunker http://jsfiddle.net/Vinthi/4atbzo6L/3/

answered Apr 18, 2018 at 2:40

Ininiv

1,3257 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andres CC Over a year ago

Nice, now the checkbox change value between true or false (it serves me for my purpose) but in my first code I can add or remove the entire object with ng-model.... can i handle this?

Ininiv Over a year ago

Yes, ng-true-value/ng-false-value accepts string values not objects so need to handle it on click/change like ng-change="ids[$index] = (value.isSelected && value) || undefined"

Collectives™ on Stack Overflow

Angularjs checkbox in ng-repeat table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related