Question

以下代码由html部分组成。在验证表主体中的所有值之后，我需要在单击特定行时更改其按钮的颜色

   This code changes the color of button on click of it before validation.

<tbody>
                <tr data-ng-repeat="val in finalData[0]" ">
                    <td><button type="button"
                    ng-click="storeTicketKey(val.TicketKey,val.clicked = !val.clicked)" class="btn btn-primary" 
                    ng-class="{'btn-danger': !val.clicked, 'btn-success': val.clicked }"
                            data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>
                    <td>{{val.Status}}</td>
                    <td>{{val.AssignedGroup}}</td>
                    <td>{{val.AssignedTo}}</td>
                    <td>{{val.L1}}</td>
                    <td>{{val.L2}}</td>
                    <td>{{val.L3}}</td>
                    <td>{{val.L4}}</td>
                    <td>{{val.L5}}</td>
                    <td>{{val.AssignedTo}}</td>
                    <td>{{val.ResponseSLAStatus}}</td>
                    <td>{{val.ResolutionSLAStatus}}</td>
                    <td>{{val.Region}}</td>
                    <td>{{val.SLABreachReason}}</td>
            </tbody>

Answer 1

在您提供的解决方案中，将删除ng-class属性，而是在按钮上创建（click）=“ checkFields（event）”，然后在您的.ts中，您可以创建用于检查有效性的函数字段并更改组件的类。

您的.html：

<td><button type="button" ng-click="storeTicketKey(val.TicketKey,val.clicked = !val.clicked)" class="btn btn-primary" "checkFields(event)" data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>

您的.ts：

checkFields(event: any){
    //Check if the fields are valid, in this case I only check if they exist
    if(!val.Status){
        return;
    }if(!val.AssignedGroup){
        return; 
    }
    .. and so on for all the fields you want to test

    //If all variables are valid and the function gets to the end
    //You change the class of the button
    event.target.className = 'btn-success';
}

Answer 2

<tr data-ng-repeat="val in finalData[0] track by $index ">
                    <td><button type="button"
                    ng-click="storeTicketKey(val.TicketKey, $index)" class="btn btn-primary"  ng-class="{'btn-success':  $index=== isActive}"                   
                            data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>
                    <td>{{val.Status}}</td>
                    <td>{{val.AssignedGroup}}</td>
                    <td>{{val.AssignedTo}}</td>
                    <td>{{val.L1}}</td>
                    <td>{{val.L2}}</td>
                    <td>{{val.L3}}</td>
                    <td>{{val.L4}}</td>
                    <td>{{val.L5}}</td>                 
                    <td>{{val.ResponseSLAStatus}}</td>
                    <td>{{val.ResolutionSLAStatus}}</td>
                    <td>{{val.Region}}</td>
                    <td>{{val.SLABreachReason}}</td>
            </tbody>


$scope.valClicked=false;
    $scope.isActive = "";
    $scope.tempTicket="";
    $scope.storeTicketKey = function(ticketKey,str) {
        $scope.finalTicketKey=ticketKey;
        $scope.tempTicket = str;
//      $scope.valClicked=val;

    }

    $scope.isActiveButton = function(){

        $scope.isActive = $scope.tempTicket;

    }

提交表格后，更改按钮颜色，特别是html表的tr

2 个答案: