亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使行在單擊按鈕時改變顏色并在再次單擊時返回原始顏色

如何使行在單擊按鈕時改變顏色并在再次單擊時返回原始顏色

慕無忌1623718 2023-10-16 10:38:45
當單擊按鈕時,我想更改顏色,當單擊同一按鈕時,我想返回到原始顏色?,F在,當單擊按鈕時,所有行都會改變顏色。html<table>      <tbody ng-repeat="field in availableFields">        <tr  ng-class="{'orderTypeTableRowSelected':tableRowTrueOrFalse}">                <td style="padding:3px;">{{field.name}}</td>                <td style="padding:3px;">                <button type="button" ng-click="orderTypeTableRowSelected(field)" class="btn btn-danger" style="margin-left:10px;"><i class="fas fa-check"></i>&nbsp;Required</button>        <button type="button" class="btn btn-warning"><i class="fas fa-check"></i>&nbsp;Default&nbsp;&nbsp;&nbsp;</button>                </td>    </tr>    </tbody></table>CSS<style>    .orderTypeTableRowSelected {        background-color: #E0F7FA;    }</style>有角的        $scope.tableRowTrueOrFalse = false;        $scope.orderTypeTableRowSelected = function (field) {            $scope.tableRowTrueOrFalse = !$scope.tableRowTrueOrFalse;            console.log(field);        };
查看完整描述

1 回答

?
慕神8447489

TA貢獻1780條經驗 獲得超1個贊

這里的問題是你有一個值列表,但只有一個布爾值代表所有這些值。


tableRowTrueOrFalse應該是布爾值數組而不是布爾值。然后你應該用默認值填充數組false。


$scope.tableRowTrueOrFalse = Array(availableFields.length).fill(false);

在你的 html 中,它會是這樣的:


<table>

      <tbody ng-repeat="field in availableFields">

        <tr  ng-class="{'orderTypeTableRowSelected':tableRowTrueOrFalse[$index]}">

                <td style="padding:3px;">{{field.name}}</td>

                <td style="padding:3px;">

                <button type="button" ng-click="orderTypeTableRowSelected(field, $index)" class="btn btn-danger" style="margin-left:10px;"><i class="fas fa-check"></i>&nbsp;Required</button>

        <button type="button" class="btn btn-warning"><i class="fas fa-check"></i>&nbsp;Default&nbsp;&nbsp;&nbsp;</button>

                </td>


    </tr>

    </tbody>

</table>

然后在你的函數中,


$scope.orderTypeTableRowSelected = function (field, index) {

            $scope.tableRowTrueOrFalse[index] = !$scope.tableRowTrueOrFalse[index];

            console.log(field);

        };


查看完整回答
反對 回復 2023-10-16
  • 1 回答
  • 0 關注
  • 109 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號