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

ng-click working for all ng-repeat elements

本文关键字：ng-repeat 元素 适用于 Ng-click      更新时间：2023-09-26

我从url中获取对象并在card视图中呈现。在那个卡视图，当我点击准备按钮，样式是适用于所有的卡视图，但它应该是适用于各自的点击。下面是代码

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

<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%"
      }
}
相关文章：