AngularJS隱藏/顯示行與切換按鈕不工作

我嘗試使用切換按鈕來顯示和隱藏我的表的一行。不幸的是，它不起作用，我在控制檯中沒有出現錯誤。調試AngularJS對初學者來說非常困難。如果我把它之間的聯繫起作用。但我需要我桌子外面的切換按鈕。AngularJS隱藏/顯示行與切換按鈕不工作

這是小提琴，它不起作用。

fiddle

謝謝！

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

來源

2014-05-18 mm1975

第一，你的控制器不掛鉤。把整個東西包裝在一個div中，併爲其添加一個'ng-controller =「CtrlInvoice」'。秒，爲什麼你在桌子上使用'ng-repeat'？你的意思是重複''？ – Ronnie

你可以分享適當的角度設置？使用ng-app和ng-controller，你會得到更準確的答案。 –

控制器設置在body-tag中。你是對的，ng-repeat不是必須的，因爲我只需要在行上。 – mm1975

所以隱藏運費行，你會希望把NG隱藏在<tr>與運輸成本。您還需要重複切換按鈕，因爲它似乎是每行。這裏是小提琴：http://jsfiddle.net/BAEh2/

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

更新JS（只是增加更多的行顯示重複）

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

來源

2014-05-18 19:16:12 Ronnie

我在''上增加了一個'ng-class'，使單選按鈕具有當前選中的活動狀態。我沒有更新我的小提琴，但你可以在這裏看到 – Ronnie

嘿羅尼，非常感謝你！我只需要一排運費。 ng-repeat被我誤解了。此外，我需要顯示/隱藏洞。實際上，仍然顯示一個td。 – mm1975

看看這個：http://jsfiddle.net/PCYuF/ – Jerrad

AngularJS隱藏/顯示行與切換按鈕不工作

回答

相關問題