I have a list which populates a screen using 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.
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.
Any ideas or code snippet .. will be appreciated.
HTML
<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>
Controller
$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;
}