[英]Angularjs Show and Hide Button within ng-repeat
I have a list which populates a screen using ng-repeat
. 我有一个列表,使用ng-repeat
填充屏幕。 Each row has a button for the user to click on to select the row. 每行都有一个按钮供用户单击以选择行。 Typically what you would use a radio button for but the user wants a button toggle. 通常你会使用单选按钮,但用户想要一个按钮切换。
What I really want is to show the first button (hide the second on displaying the list first time) and after the user clicks on the first one to select a specific row, I want to hide the first button and show the second. 我真正想要的是显示第一个按钮(在第一次显示列表时隐藏第二个按钮),在用户点击第一个按钮以选择特定行之后,我想隐藏第一个按钮并显示第二个按钮。 The 2 button have different ids, text, style. 2按钮具有不同的ID,文本,样式。 So to the user, its like changing the look of the button after selection. 所以对用户来说,就像选择后更改按钮的外观一样。
I tried setting the showfarebut1
/ showfarebut2
scope variable in my function populateFareOption(row.col3.value, row.col4.value)
in the controller, but all the rows had the second button after button one is clicked. 我尝试在showfarebut1
中的函数populateFareOption(row.col3.value, row.col4.value)
中设置showfarebut1
/ showfarebut2
范围变量,但是在单击按钮1之后所有行都有第二个按钮。
Any ideas or code snippet .. will be appreciated. 任何想法或代码片段..将不胜感激。
<tr ng-repeat="row in rowList">
<td> {{row.col1.value}}</td>
<td>
<span class="price">PRICE:
<strong class="amount">{{row.col2.value}}</strong>
</span>
<button id="btnXX1" ng-show="showfarebut1" type="button" class="btn pull-right" ng-click="populateFareOption(row.col3.value,row.col4.value)">
<span class="text pull-left" name="fareOption" ng-model="travelCardForm.colOption" value="{{row.col3.value}}">Select</span>
<i class="icon-placeholder"></i>
</button>
<button id="btnXX2" ng-show="showfarebut2" type="button" class="btn pull-right">
<span class="text pull-left">Selected</span>
<i class="selected-icon pull-right"></i>
</button>
</td>
</tr>
$scope.showfarebut1=true;
$scope.showfarebut2=false;
$scope.populateFareOption = function(x,y){
cardForm.fareOption.value=x;
cardForm.productCode.value=y;
$scope.showfarebut1=false;
$scope.showfarebut2=true;
}
In your example you have showfarebut1
and showfarebut2
shared across all the rows, that causes one button clicked affect all rows. 在您的示例中,您在所有行中共享showfarebut1
和showfarebut2
,这会导致单击一个按钮影响所有行。 You should use something bound to the current row: row.showfarebut1
and row.showfarebut2
. 你应该使用绑定到当前行的东西: row.showfarebut1
和row.showfarebut2
。
However, there is a more efficient way to make toggle buttons. 但是,有一种更有效的方法来制作切换按钮。 You can reuse the same button and set classes and text according to the state of the record. 您可以重复使用相同的按钮,并根据记录的状态设置类和文本。 Here is a simple example: 这是一个简单的例子:
HTML HTML
<ul class="list-group" ng-controller="ctrl">
<li class="list-group-item" ng-repeat="row in rowList">
<span>{{row.col1.value}}</span>
<span>{{row.col2.value}}</span>
<button type="button" ng-click="row.selected=!row.selected" class="pull-right btn btn-xs">
<span ng-class="{'glyphicon':true, 'glyphicon-ok':row.selected, 'glyphicon-plus':!row.selected}"></span>
{{row.selected?'Selected':''}}
</button>
</li>
</ul>
You can use ng-class
directive to toggle classes and condition like {{row.selected?'Selected':''}}
to toggle text of the button. 您可以使用ng-class
指令切换类和条件,如{{row.selected?'Selected':''}}
来切换按钮的文本。
JavaScript JavaScript的
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.rowList = [{
col1: { value: 'r1c1'},
col2: {value: 'r1c2'}
}, {
col1: {value: 'r2c1'},
col2: {value: 'r2c2'}
}, {
col1: {value: 'r3c1'},
col2: {value: 'r3c2'}
}];
});
You even don't need some special function for selecting an item, you can do simple things directly in ng-click
您甚至不需要一些特殊功能来选择项目,您可以直接在ng-click
执行简单的操作
Screenshot 截图
Plunker: http://plnkr.co/edit/ZFRIWOe2HxMq8K11FBk4?p=preview Plunker: http ://plnkr.co/edit/ZFRIWOe2HxMq8K11FBk4?p =preview
Edit (adapted version): 编辑(改编版):
HTML HTML
<table ng-controller="ctrl" class="table">
<tr ng-repeat="row in rowList">
<td>{{row.col1.value}}</td>
<td>
<span class="price">PRICE:
<strong class="amount">{{row.col2.value}}</strong>
</span>
<button id="btn{{$index}}" type="button" class="btn pull-right" ng-click="select(row)">
<span class="text pull-left" name="fareOption" value="{{row.col3.value}}">{{row.selected?'Selected':'Select'}}</span>
<i ng-class="{'icon-placeholder':!row.selected, 'selected-icon':row.selected, 'pull-right':row.selected}"></i>
</button>
</td>
</tr>
</table>
JavaScript JavaScript的
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.rowList = [{
col1: {value: 'Orange'},
col2: {value: '10'},
col3: {value: 'x1'},
col4: {value: 'y1'}
}, {
col1: {value: 'Apple'},
col2: {value: '20'},
col3: {value: 'x2'},
col4: {value: 'y2'}
}, {
col1: {value: 'Banana'},
col2: {value: '15'},
col3: {value: 'x3'},
col4: {value: 'y3'}
}];
$scope.select = function(row) {
row.selected=!row.selected;
// Do something with row.col3.value and row.col4.value
}
});
Plunker: http://plnkr.co/edit/DdO1zBXxkyXWSLA6Gv2x?p=preview Plunker: http ://plnkr.co/edit/DdO1zBXxkyXWSLA6Gv2x?p=preview
Attach showfarebut2
to the object in rowList
: 附加showfarebut2
到对象rowList
:
$scope.populateFareOption = function(row){
cardForm.fareOption.value = row.col3.value;
cardForm.productCode.value = row.col4.value;
row.showFareBut2 = true;
}
And your HTML: 你的HTML:
<button id="btnXX2" ng-show="row.showfarebut2" type="button" class="btn pull-right">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.