Question

我从网址获取对象，并在卡片视图中呈现。在该卡片视图中，当我单击“准备好”按钮时，该样式适用于所有卡片视图，但它假定适用于相应的单击。这是代码

<md-card md-image-no-fill flex-xs flex-gt-xs="30" style="border-radius:0px; max-width:23%" ng-repeat="x in getResponse">
  <md-card-header class="card-header" ng-class="{'card-header1':toggle}">

    <md-card-header-text class="card-header-text" >
        {{header_text}}
    </md-card-header-text>
  </md-card-header>

  <md-card-content class="card-content">
    Order Id:{{x.orderId}} </br>
    Order Amount:{{x.amount}}
  </md-card-content>
  <md-card-actions layout="row" layout-align="start center">
    <md-button style=" background-color:#A3506E;  margin-left:38%;" ng-click="delivered(x.id)" ng-style="btn_style">{{button}}</md-button>
  </md-card-actions>
</md-card>

Controller Logic
$scope.toggle = false;
    $scope.header_text="Marked As Accepted - Process Please";

    $scope.button="Ready";

    $scope.delivered=function(id){

      $scope.toggle=true;
      console.log("hello world");
      $scope.header_text="Dispatched Is it Delivered";
      $scope.button="Delivered";

      $scope.btn_style={
        "background-color":"Green",
        "margin-left":"38%"
      }

    }

$http.get('url').success(function(data) {
        $scope.getResponse = data;       
      })
      .error(function(data, status) {
        console.error('Repos error', status, data);
      })
  })

Answer 1

<md-card-actions layout="row" layout-align="start center">
    <md-button style=" background-color:#A3506E;  margin-left:38%;" ng-click="delivered(x.id,x)" 
               ng-style="x.btn_style">{{button}}</md-button> //<----changed this line
  </md-card-actions>


$scope.delivered=function(id,x){                             //<----changed

      $scope.toggle=true;
      console.log("hello world");
      $scope.header_text="Dispatched Is it Delivered";
      $scope.button="Delivered";

      x.btn_style={                                          //<----changed
        "background-color":"Green",
        "margin-left":"38%"
      }
}

ng-click适用于所有ng-repeat元素

1 个答案: