Question

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

这里的问题是，您在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>

因此，您可以将映射/内容属性附加到每个项目中，使其独有，并且在您的控制器中：

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


  }



}

这里是一名工作人员：https://plnkr.co/edit/rENbv8h3Pp7tm82YLpQS?p=preview

限制对操作行AngularJS的操作

1 个答案: