[英]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.