如何在啓用/禁用按鈕的幫助下禁用/啓用表中的整個行？

在我的表中，我有兩個按鈕啓用和禁用。在表格中，我希望藉助這些按鈕禁用/啓用整行。首先禁用按鈕必須處於活動狀態，而禁用按鈕處於禁用狀態。當我點擊禁用按鈕時，應禁用整行，禁用按鈕被禁用時，啓用按鈕必須激活。如何在angularJS中做到這一點。需要幫助。如何在啓用/禁用按鈕的幫助下禁用/啓用表中的整個行？

<table style="border:1px solid;"> 
<tr> 
    <td>one</td> 
    <td>two</td> 
    <td>three</td> 
    <td> 
    <button>ENABLE</button><br/> 
    <button>DISABLE</button> 
    </td> 
</tr> 
</table>

https://jsfiddle.net/vtkj1cug/

來源

2017-08-29 Musheer Aiman

首先明確要啓用/禁用的。這必須只應用於窗體控件..... –

我期待你知道如何ng-repeat的作品，這是它如何做的：

// HTML 
<tr ng-repeat="item of items" 
    ng-click="rowClicked(item)" 
    class="{{item.enabled ? 'row-enabled': ''}}"> 
    <td>Content 1</td> 
    <td>Content 2</td> 
    <td>Content 3</td> 
    <td>Content 4</td> 
    <td>Content 5</td> 
    <td> 
    <button ng-if="!item.enabled" 
      ng-click="item.enabled = true"> 
     ENABLE 
    </button> 
    <button ng-if="item.enabled" 
      ng-click="item.enabled = false"> 
     DISABLE 
    </button> 
    </td> 
</tr> 

//JS 
$scope.rowClicked = function(item) 
{ 
    if (!item.enabled) 
    { 
    // HEY ROW IS DISABLED YOU CAN'T PASS 
    return; 
    } 

    // stuff 
}

更新：

，因爲你的問題在這裏改變的範圍是更新滿足您的需求

// HTML 
<tr ng-click="rowClicked()" 
    class="{{!rowEnabled ? 'disabled': ''}}"> 
    <td>Content 1</td> 
    <td>Content 2</td> 
    <td>Content 3</td> 
    <td>Content 4</td> 
    <td>Content 5</td> 
    <td> 
    <button ng-disabled="!rowEnabled" 
      ng-click="rowEnabled = true"> 
     ENABLE 
    </button> 
    <button ng-disabled="rowEnabled" 
      ng-click="rowEnabled = false"> 
     DISABLE 
    </button> 
    </td> 
</tr> 

//JS 
$scope.rowEnabled = false; // put it somewhere in your declaration area. 

$scope.rowClicked = function() 
{ 
    if (!$scope.rowEnabled) 
    { 
    // HEY ROW IS DISABLED YOU CAN'T PASS 
    return; 
    } 

    // stuff 
}

注意：表格元素沒有disabled屬性，它僅適用於輸入元素。所以，如果你想有一個殘疾的樣子，你需要使用CSS喜歡自己創建它：

tr.disabled { 
    // some styles to make your element disabled 
    cursor: default; 
}

working angularjs example 希望幫助

來源

2017-08-29 07:06:58 masterpreenz

@masterpreenz ...它不工作 –

你仍然可以通過簡單地刪除ng-repeat使其工作，反正我會更新答案 – masterpreenz

罰款。你能檢查那個小提琴鏈接嗎？ –

只能啓用和禁用表單元素，如果你想禁用你最likly正在尋找CSS樣式錶行，

在表單元素，你可以使用

<md-button class="md-primary md-raised" ng-disable="[Enabled true false var]"> {{enable}} </md-button> 
<md-button class="md-warn md-raised" ng-disable="![Enabled true false var]"> {{disable}} </md-button>

ng-disable

在錶行，你可以添加一個ng-class樣式表單元素

<tr ng-class="{'enabled-row': [Enabled true false var], 'disabled-row': ![Enabled true false var]}">

來源

2017-08-29 07:08:30

如何在啓用/禁用按鈕的幫助下禁用/啓用表中的整個行？

回答

相關問題