javascript - Angularjs Prikaži i Sakrij Gumb unutar ng-repeat

Imam popis koji popunjava zaslon koristeći ng-repeat. Svaki red ima gumb na koji korisnik može kliknuti kako bi odabrao red. Obično biste koristili radio gumb, ali korisnik želi gumb za prebacivanje.

Ono što stvarno želim je prikazati prvi gumb (sakriti drugi pri prvom prikazu popisa) i nakon što korisnik klikne na prvi kako bi odabrao određeni red, želim sakriti prvi gumb i prikazati drugi. Ta dva gumba imaju različite ID-jeve, tekst i stil. Tako da korisniku izgleda kao da se izgled gumba mijenja nakon odabira.

Pokušao sam postaviti varijablu opsega showfarebut1/showfarebut2 u svojoj funkciji populateFareOption(row.col3.value, row.col4.value) u kontroleru, ali svi redci su imali drugi gumb nakon što je prvi gumb kliknut.

Bilo kakve ideje ili isječak koda.. bit će cijenjeno.

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>

Kontroler

    $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;
       }

Odgovor #1

U vašem primjeru imate showfarebut1 i showfarebut2 zajedničke za sve redove, što uzrokuje da klik na jedan gumb utječe na sve redove. Trebali biste koristiti nešto vezano uz trenutni red: row.showfarebut1 i row.showfarebut2.

Međutim, postoji učinkovitiji način za izradu tipki za prebacivanje. Možete ponovno koristiti istu tipku i postaviti klase i tekst prema stanju zapisa. Evo jednostavnog primjera:

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>

Možete koristiti ng-class direktivu za prebacivanje klasa i uvjet poput {{row.selected?'Selected':''}} za prebacivanje teksta gumba.

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'}
    }];
  });

Čak vam nije potrebna neka posebna funkcija za odabir stavke, jednostavne stvari možete raditi izravno u ng-click

Screenshot

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

Uredi (prilagođena verzija):

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

Odgovor #2

Priložite showfarebut2 objektu u rowList:

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

I tvoj HTML:

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