Javascript 将操作限制到已操作的行AngularJS

我无法找到一种方法将ng change触发的操作限制为仅由用户操作的行。因此，如果用户在下拉列表1中选择“联盟”，则“可用项目”列上应显示另一个下拉列表。现在，如果用户操作第1行，则表中的所有下拉列表都会受到该操作的影响。我需要的是将操作限制为仅由用户操作的行。小提琴：

限制对象：
{{item.idsport}，游戏类型{{item.idgametype}，{{item.name}（当前限制{{item.value}}）{{{item.mapped}
映射类型：{{Mapping.name}
可用项目：
$scope.mappingType=[{name:“Sport”}，{name:“League”}，{name:“无映射”}]；
$scope.sportsList=[{id:34，名称：“[默认]”}，{id:15，名称：“高山滑雪”}，{id:8，名称：“美式足球”}，{id:23，名称：“澳大利亚规则”}]；
$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”：“总计”，“online”：“1”，“profilelimitkeyid”：“1”，“value”：“3000”}，{“id”：“3”，“idgametype”：“81”，“idsport”：“NFL”，“mapped”：“0”，“name”：“IfBets”，“在线”：“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“，”映射“：”0“，”名称“：”相关“，”在线“：”1“，”profilelimitkeyid“：”1“，”值“：”0“，”idgametype“，”81“，”idsport“，”NFL“，”映射“，”0“，”名称“，”反向“，”在线“：”1“，”profilelimitkeyid“：”1“，”值“：”500“，”id“，”idgametype“，”81“，”idsport“，”NFL“，”映射“，”2“，”名称“，”挑逗者“，”在线“，”1“，”profilelimitkeyid“，”1“，”值“：”0“；”；
$scope.buau=true；
$scope.which=函数（映射、索引）{
如果（mapping.name==“Sport”）{
$scope.buau=true；
}else if（mapping.name==“League”）{
$scope.buau=false；
}else if（mapping.name==“无映射”）{
}

这里的问题是，您在所有行的

ng show

条件中使用了相同的变量，因此所有行总是一起更改是很自然的。您可以通过向ng repeat中的每个项添加一个属性来解决此问题，如下所示

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

---

这是一个正在工作的plunker:

Thanx Ahmed，它按预期工作。现在我正试图将一个函数限制到已操作的行。我更新了小提琴：如果您选择“league”在下拉列表1中，你在上面的下拉列表2中选择一项运动，然后有另一个显示联赛的下拉列表。我找不到方法将触发功能限制为仅由用户操作的行。现在触发功能填充所有下拉列表。你知道如何实现吗？@EnriquedelBosque我不太明白问题所在lem是。您到底对哪个函数有问题？您试图实现的最终结果是什么？嗨，艾哈迈德，由ngChange=“GetLeagueCegories（）”触发的操作应该只影响用户操作的行。如果用户在下拉列表1中选择“League”，则“AvailableItems”上应该显示两个下拉列表列。顶部下拉菜单允许您选择一项运动，选中时，下拉菜单显示联赛选项。问题是，表中的所有联赛选项下拉菜单在第一次触发功能后都会填充（如果您在另一行的下拉菜单中选择“联赛”，则在选择运动之前已经显示联赛选项）.Plunkr您可以对

$scope.leagueList

变量执行与我在上面的回答中所做的相同的操作，即通过将

item

对象传递到

getLeagueCegories

函数并将联盟列表附加到

item.leagueList

.Plunker:。只想指出，在I’我会努力的——也许有一种更有效的方法可以做到这一点，但在不了解应用程序的全部范围和所有细节的情况下，很难给你提供建议。

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

$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" ){


  }



}