Aktion auf Zeile beschränken AngularJS

Question

Ich kann keine Möglichkeit finden, die durch ng-change ausgelöste Aktion auf die vom Benutzer betriebene Zeile zu beschränken. Wenn der Benutzer also "Liga" in Dropdown 1 auswählt, sollte in der Spalte "Verfügbare Artikel" ein weiteres Dropdown-Menü angezeigt werden. Wenn Benutzer jetzt Zeile 1 verwendet, sind alle Dropdown-Elemente aus der Tabelle von der Aktion betroffen. Was ich brauche, ist die Aktion auf nur die Reihe zu beschränken, die vom Benutzer bedient wird. Fiddle: https://plnkr.co/edit/kAiLw40hUvnLk9jv86aj?p=preview

<div class="col-md-12 limitObjects"> 
<h4>Limit Object: </h4> 
    <div style="overflow: auto; max-height: 500px; height: 100%"> 
    <table border="0" class="table-bordered myTable" > 
    <tbody> 
    <tr ng-repeat="item in userMappings" ng-model="item"> 
     <td class="col-md-4"> 
     {{item.idsport}}, Game Type {{item.idgametype}}, {{item.name}} (Current limit {{item.value}}) {{item.mapped}} 
     </td> 
     <td class="col-md-3 mapType" style="padding-bottom: 25px; padding-left: 15px" > 
     <h4>Mapping Type: <span style="font-size:0.8em">{{mapping.name}}</span> </h4> 
     <select ng-model="mapping" ng-change="which(mapping, $index, event)" ng-options="mapping.name for mapping in mappingType" se-change=''></select> 
     </td> 
     <td class="col-md-4" style="padding-bottom: 25px; padding-left: 10px"> 
     <h4>Available Items:</h4> 
     <select ng-show="buau" ng-model="sport" ng-change="getID(sport, $index, $event); table($event)" ng-options="sport.name for sport in sportsList"></select> 
     <select ng-show="buau == false" ng-model="sportLeague" ng-change="getLeaguecategories(sportLeague, $index, $event)" ng-options="sportLeague.name for sportLeague in sportsList" style="float: left;"></select> 
     <select ng-show="!buau" ng-model="selectedLeague" ng-change="getID(selectedLeague, $index)" ng-options="selectedLeague.name for selectedLeague in leagueList.response" ></select> 
    </td> 
    </tr> 
    </tbody> 
</table> 
</div> 

<script> 
$scope.mappingType = [{name: "Sport"}, {name: "League"}, {name: "No Mapping"}]; 

$scope.sportsList = [{id : 34, name : "[Default]"}, {id: 15, name : "Alpine Skiing"}, { id : 8, name : "American Football" }, { id : 23, name : "Australian Rules"}]; 

$scope.userMappings = [{"id":"1","idgametype":"81","idsport":"NFL","mapped":"0","name":"Side","online":"1","profilelimitkeyid":"1","value":"3000"},{"id":"2","idgametype":"81","idsport":"NFL","mapped":"4","name":"Total","online":"1","profilelimitkeyid":"1","value":"3000"},{"id":"3","idgametype":"81","idsport":"NFL","mapped":"0","name":"IfBets","online":"1","profilelimitkeyid":"1","value":"500"},{"id":"4","idgametype":"81","idsport":"NFL","mapped":"0","name":"MoneyLine","online":"1","profilelimitkeyid":"1","value":"2000"},{"id":"5","idgametype":"81","idsport":"NFL","mapped":"1","name":"Parlays","online":"1","profilelimitkeyid":"1","value":"700"},{"id":"6","idgametype":"81","idsport":"NFL","mapped":"0","name":"Related","online":"1","profilelimitkeyid":"1","value":"0"},{"id":"7","idgametype":"81","idsport":"NFL","mapped":"0","name":"Reverses","online":"1","profilelimitkeyid":"1","value":"500"},{"id":"8","idgametype":"81","idsport":"NFL","mapped":"2","name":"Teasers","online":"1","profilelimitkeyid":"1","value":"0"}]; 

$scope.buau = true; 

$scope.which = function(mapping, index) { 
if (mapping.name === "Sport"){ 
    $scope.buau = true;  
} else if (mapping.name === "League") { 
    $scope.buau = false; 
} else if (mapping.name === "No Mapping"){ 

} 
</script> 

Answer 1

Das Problem hierbei ist, dass die Sie die gleiche Variable in Ihrem ng-show Zustand verwenden für alle Zeilen, so ist es natürlich, dass alle Zeilen immer zusammen ändern würde. Sie können dieses Problem beheben, indem Sie eine Eigenschaft auf jedes Element in den ng-repeat wie diese Zugabe

<select ng-model="item.mapping" ng-change="which(item, $index, event)" ng-options="mapping.name for mapping in mappingType" se-change=''></select> 

<select ng-show="item.buau" ng-model="sport" ng-change="getID(sport, $index, $event); table($event)" ng-options="sport.name for sport in sportsList"></select> 

<select ng-show="item.buau == false" ng-model="sportLeague" ng-change="getLeaguecategories(sportLeague, $index, $event)" ng-options="sportLeague.name for sportLeague in sportsList" style="float: left;"></select> 

<select ng-show="!item.buau" ng-model="selectedLeague" ng-change="getID(selectedLeague, $index)" ng-options="selectedLeague.name for selectedLeague in leagueList.response" ></select> 

, so dass Sie zu jedem Elemente der Kartierungs-/buau Eigenschaften Befestigung auf diese Weise einzigartig ist, und in Sie sind Controller:

$scope.which = function(item, index) { 



    if (item.mapping.name === "Sport"){ 

     item.buau = true; 


    } else if (item.mapping.name === "League") { 
      item.buau = false; 

    } else if (item.mapping.name === "No Mapping"){ 


    } 



} 

hier eine Arbeits Plunker: https://plnkr.co/edit/rENbv8h3Pp7tm82YLpQS?p=preview