Angularjs Show and Hide button in ng-repeat

Question

I have a list that fills the screen using ng-repeat . Each row has a button that the user can click to select a row. Typically, you use a radio button, but the user wants the button to switch.

What I really want is to show the first button (hide the second when the list is displayed for the first time), and after the user clicks on the first to select a specific line, I want to hide the first button and show the second, Button 2 has different identifiers, text, style. Thus, the user can change the appearance of the button after selection.

I tried to set the scope variable showfarebut1 / showfarebut2 in my populateFareOption(row.col3.value, row.col4.value) function populateFareOption(row.col3.value, row.col4.value) in the controller, but there was a second button on all the lines after the button was clicked.

Any ideas or piece of code .. would be appreciated.

HTML

 <tr ng-repeat="row in rowList"> <td> {{row.col1.value}}</td> <td> <span class="price">PRICE:&nbsp; <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; } 

Answer 1

In your example, you have showfarebut1 and showfarebut2 separated by all lines, which causes a single click on all lines. You should use something related to the current line: row.showfarebut1 and row.showfarebut2 .

However, there is a more efficient way to create toggle buttons. You can use the same button and set the classes and text according to the state of the record. Here is a simple example:

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 to switch classes and conditions like {{row.selected?'Selected':''}} to switch the button text.

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 don’t even need a special function to select an element, you can do simple things directly in ng-click

Screenshot

Plunker: http://plnkr.co/edit/ZFRIWOe2HxMq8K11FBk4?p=preview

---

Edit (adapted version):

HTML

 <table ng-controller="ctrl" class="table"> <tr ng-repeat="row in rowList"> <td>{{row.col1.value}}</td> <td> <span class="price">PRICE:&nbsp; <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

 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

Answer 2

Attach showfarebut2 to the object in rowList :

 $scope.populateFareOption = function(row){ cardForm.fareOption.value = row.col3.value; cardForm.productCode.value = row.col4.value; row.showFareBut2 = true; } 

And your HTML:

 <button id="btnXX2" ng-show="row.showfarebut2" type="button" class="btn pull-right">