Question

我尝试使用切换按钮来显示和隐藏表格的一行。不幸的是，它不起作用，我在控制台中没有错误。对于初学者来说，调试AngularJS非常困难。如果我把它之间的链接工作。但我需要在桌子外面使用切换按钮。

这是小提琴，不起作用。

谢谢！

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;
    }
}

Answer 1

因此，要隐藏运费成本行，您需要将{-1}与运费相加。{1}}。您还需要重复切换按钮，因为它似乎是每行。这是小提琴：http://jsfiddle.net/BAEh2/

更新了HTML

<tr>

更新JS（刚添加更多行以显示重复）

<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>

AngularJS使用切换按钮隐藏/显示行不起作用

1 个答案: