Question

38

Angularjs Show and Hide Button within ng-repeat

rated 0 times [ 39] [ 1] / answers: 1 / hits: 22107 / 10 Years ago, wed, april 30, 2014, 12:00:00

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:&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;

       }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

micayla

Add To Favorites

Follow

Total Points: 148

Total Questions: 92

Total Answers: 109

Location: Aruba

Member since Sat, Oct 2, 2021

3 Years ago

micayla questions

1 Web3 Issue : React Application not compiling

Fri, Dec 24, 21, 00:00, 2 Years ago

1 How to add margin in materialize css?

Thu, Apr 16, 20, 00:00, 4 Years ago

1 How can I use Material-UI Autocomplete together with react-virtualized?

Mon, Dec 9, 19, 00:00, 5 Years ago

1 Highlight rows in MUI-Datatables

Thu, Nov 14, 19, 00:00, 5 Years ago

1 Mock using jest moment().format is returning current date instead of mocked date

Tue, Aug 27, 19, 00:00, 5 Years ago

View All

answered 10 Years ago longd · Accepted Answer

In your example you have showfarebut1 and showfarebut2 shared across all the rows, that causes one button clicked affect all rows. You should use something bound to the current row: row.showfarebut1 and 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

<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.

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

Screenshot

enter

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