简体   繁体   English

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

[英]ng-click working for all ng-repeat elements

I'm getting the object from url and that is rendered in card view. 我从url获取对象,该对象在卡片视图中呈现。 In that card view when i click the ready button that the style is apply for all card view but it suppose to be apply for respective click. 在该卡片视图中,当我单击“就绪”按钮时,该样式适用于所有卡片视图,但假定适用于相应的单击。 here is the code 这是代码

<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%"
      }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM