CODEWITHSUNDEEP
angularjs
mm1975
mm1975

Reputation: 1655

AngularJS Hide / Show Row with toggle-Button not work

I try to use a toggle-button to show and hide a row of my table. Unfortunately, it does not work and I get no error in the console. Debugging AngularJS is quite hard for a beginner. If I put links between it works. But I need the toggle-Button outside of my table.

Here is the fiddle, which do not work.

fiddle

Thank you!

HTML

<body ng-app="lexoffice" ng:controller="CtrlInvoice">
<table ng-repeat="field in data.fields">
<tbody>
<tr class="trShipping" ng-hide="field.isRowHidden">
<td><input>{{field.shippingcosts}}</input></td>
<td><textarea type="text" ng:model="selectionCurrency"></textarea></td></tr>
</tbody>        
</table>
<div class="btn-group btn-group-shipping" data-toggle="buttons">
<label class="btn btn-default shipping-radio">
<input type="radio" class="btn" ng-click="hideShippingCosts(field)">
    Hide Row</label>
<label class="btn btn-default shipping-radio">
<input type="radio" class="btn" ng-click="showShippingCosts(field)">
    Show Row</label>
</div>

SCRIPT

var myApp = angular.module('lexoffice', []);

function CtrlInvoice($scope) {
    $scope.data = {
        fields: [{
            shippingcosts: 0.00,
            isRowHidden: false
        }]
    };

    $scope.hideShippingCosts = function (field) {
        field.shippingcosts = 0.00;
        field.isRowHidden = true;
    }
    $scope.showShippingCosts = function (field) {
        field.shippingcosts = 0.00;
        field.isRowHidden = false;
    }
}

Upvotes: 2

Views: 3606

Answers (1)

Ronnie
Ronnie

Reputation: 11198

So to hide the shipping cost row, you'll want to put the ng-hide on the <tr> with the shipping cost. You also need to repeat the toggle buttons since it seems its per row. Here is the fiddle: http://jsfiddle.net/BAEh2/

updated HTML

<div ng-controller="CtrlInvoice">
    <table ng-repeat="field in data.fields">
        <tbody>
            <tr class="trShipping">
                <td ng-hide="field.isRowHidden"><input ng-model="field.shippingcosts"/></td>
                <td><textarea type="text" ng-model="selectionCurrency"></textarea></td>
                <td>
                    <div class="btn-group btn-group-shipping" data-toggle="buttons">
                    <label class="btn btn-default shipping-radio"ng-click="hideShippingCosts(field)" ng-class="{'active': field.isRowHidden}">
                    <input type="radio" class="btn" />
                    Hide Row</label>
                    <label class="btn btn-default shipping-radio" ng-click="showShippingCosts(field)" ng-class="{'!active': field.isRowHidden}">
                    <input type="radio" class="btn" />
                    Show Row</label>
                    </div>
                </td>
            </tr>
        </tbody>        
    </table>
</div>

update JS (just added more rows to show repeat)

var myApp = angular.module('lexoffice', []);

function CtrlInvoice($scope) {
    $scope.data = {
        fields: [{
            shippingcosts: 1.00,
            isRowHidden: false
        },
        {
            shippingcosts: 2.00,
            isRowHidden: false
        },
        {
            shippingcosts: 3.00,
            isRowHidden: true
        }]
    };

    $scope.hideShippingCosts = function (field) {
        field.shippingcosts = 0.00;
        field.isRowHidden = true;
    };
    $scope.showShippingCosts = function (field) {
        field.shippingcosts = 0.00;
        field.isRowHidden = false;
    };
}

Upvotes: 1

Related Questions