AngularJS：テーブル内でダイナミックドロップダウンのNGモデルが機能しない

Question

ボタンのクリックに基づいて動的な行を作成しようとしています。行にはドロップダウンボックスがあります。問題は、新しい行を追加して新しい行にオプションを選択すると、前の行で選択したオプションも変更されていることです。前の行オプションは正しくバインドされていません。

私のHTMLコード：

<div id="features" ng-controller="featuresCtrl"> 
    <br> 
    <div class="row"> 
     <div class="form-group col-md-6"> 
      <table cellpadding="15" cellspacing="10"> 
       <thead> 
       <tr> 
        <th style="text-align: center;">Feature</th> 
        <th style="text-align: center;">Type</th> 
        <th style="text-align: center;">Value</th> 
        <th></th> 
        <th></th> 
       </tr> 
       </thead> 
       <tbody> 

       <tr></tr> 
       <tr ng-repeat="r in rows"> 
       <td> 
        <select ng-model="r.data.model" ng-options="option.name for option in data.availableOptions" 
          ng-change="getValues(r.data.model.name)"> 
         <option value="">Select Feature</option> 
        </select> 

        </td> 
        <td> 
         <select ng-model="r.updateData.model" ng-options="option.name for option in updateData.availableOptions" 
           ng-change="getBinSet(r.updateData.model.name)"> 
          <option value="">Select Type</option> 
         </select> 
        </td> 
        <td> 
         <select ng-model="r.binData.model" ng-options="option.name for option in binData.availableOptions"> 
          <option value="">Select Value</option> 
         </select> 
        </td> 
        <td ng-if="showAdd"> 
         <div class="text-center"> 
          <button ng-click="addRow()">Add</button> 
         </div> 
        </td> 
        <td ng-if="showAdd"> 
         <div class="text-center"> 
          <button ng-click="remove($index)">Remove</button> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td></td> 
        <td style="align-self: center;"> 
         <button style="align-self: center" ng-click="submitForm(rows)">Submit</button> 
        </td> 
        <td></td> 
       </tr> 

       </tbody> 
      </table> 
      <br> 
     </div> 

マイ角度JSコード：

'use strict'; 

var testControllers = angular.module('testControllers'); 

testControllers.controller('featuresCtrl', ['$scope','$route','$filter', '$http', '$location','$window','$timeout', 'NgTableParams', 
    function($scope, $route, $filter, $http, $location, $window, $timeout, NgTableParams) { 

     $scope.rows = [{}]; 
     $scope.nrows = []; 
     $scope.showAdd = false; 


     $scope.addRow = function() { 
      $scope.rows.push({ 

      }); 

     }; 

     $scope.remove = function(index) { 
       $scope.rows.splice(index, 1); 
     }; 

     $scope.submitForm = function(rows) { 
      console.log("rows", rows); 
     }; 

     $scope.data = { 
      model: null, 
      availableOptions: [ 
       { name: 'TestA'}, 
       { name: 'TestB'}, 
       { name: 'TestC'}, 
       { name: 'TestD'} 

      ] 
     }; 

     $scope.getValues = function (featureType) { 
      console.log("getValues", featureType); 

      $scope.showAdd = false; 


      if (featureType != null) { 

       $http.get('/getPropensityValues.do', {params: {'featureType': featureType}}).success(function (data) { 
        var test = []; 
        angular.forEach(data, function (item) { 
         test.push({name: item}); 
        }); 
        $scope.updateData = { 
         model: null, 
         availableOptions : test 
        }; 
       }); 
      } 
     }; 

     $scope.getBinSet = function (featureType) { 
      console.log("getBinSet", featureType); 

      $scope.showAdd = true; 

      if (featureType != null) { 
       $scope.binData = { 
        model: null, 
        availableOptions: [ 
         {name: '1'}, 
         {name: '2'}, 
         {name: '3'}, 
         {name: '4'}, 
         {name: '5'}, 
         {name: '6_10'}, 
         {name: '10_15'}, 
         {name: '16_20'}, 
         {name: '21_25'}, 
         {name: '26_30'}, 
         {name: '31_35'}, 
         {name: '36_40'}, 
         {name: '41_45'}, 
         {name: '46_50'}, 
         {name: '>50'} 
        ] 
       }; 

      } 
     }; 

    }]); 

いくつかのいずれかは、私がここで間違ってやっているものを私に伝えることができますか？

Answer 1

このようにする必要があります。

var app = angular.module("app",[]); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
    $scope.updatedData ={ 
 
     selections:[{ 
 
       row : [{ name:""}] 
 
     } 
 
     ] 
 
    }; 
 
    
 
    $scope.addRow = function(index){ 
 
    $scope.index = 0; 
 
    var row = []; 
 
    var name = {name:""}; 
 
    row.push(name); 
 
     if($scope.updatedData.selections.length <= index+1){ 
 
      $scope.updatedData.selections.splice(index+1,0,{ 
 
       row : [{ name:""}] 
 
     }); 
 
     } 
 
    }; 
 
    
 
    $scope.getValues = function(val){ 
 
    if(val=== 'TestB') { 
 
     $scope.data1 = { 
 
      model: null, 
 
      availableOptions: [ 
 
       { name: 'TestA'}, 
 
       { name: 'TestC'}, 
 
       { name: 'TestD'} 
 

 
      ] 
 
     }; 
 
    } 
 
    
 
    else if(val=== 'TestA') { 
 
     $scope.data1 = { 
 
      model: null, 
 
      availableOptions: [ 
 
       { name: 'TestB'}, 
 
       { name: 'TestC'}, 
 
       { name: 'TestD'} 
 

 
      ] 
 
     }; 
 
    } 
 
    
 
    else if(val=== 'TestC') { 
 
     $scope.data1 = { 
 
      model: null, 
 
      availableOptions: [ 
 
       { name: 'TestA'}, 
 
       { name: 'TestB'}, 
 
       { name: 'TestD'} 
 

 
      ] 
 
     }; 
 
    } 
 
    
 
    else { 
 
     $scope.data1 = { 
 
      model: null, 
 
      availableOptions: [ 
 
       { name: 'TestA'}, 
 
       { name: 'TestB'}, 
 
       { name: 'TestC'} 
 

 
      ] 
 
     }; 
 
    } 
 
    
 
    }; 
 
    
 
    $scope.deleteRow = function($event,index){ 
 
    if($event.which == 1) 
 
     $scope.updatedData.selections.splice(index,1); 
 
     
 
    if($event.which == 1) 
 
     $scope.updatedData1.selections.splice(index,1); 
 
    
 
    } 
 
    
 
    $scope.data = { 
 
      model: null, 
 
      availableOptions: [ 
 
       { name: 'TestA'}, 
 
       { name: 'TestB'}, 
 
       { name: 'TestC'}, 
 
       { name: 'TestD'} 
 
      ], 
 
      availableOptions2: [ 
 
       { name: 'Test2A'}, 
 
       { name: 'Test2B'}, 
 
       { name: 'Test2C'}, 
 
       { name: 'Test2D'} 
 

 
      ] 
 
     }; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <table> 
 
    <tr ng-repeat="d in updatedData.selections track by $index"> 
 
     <td> 
 
      <select ng-model="updatedData.selections[$index].row[0].name" 
 
        ng-options="option.name as option.name for option 
 
              in data.availableOptions" 
 
              ng-change="getValues(updatedData.selections[$index].row[0].name)"> 
 
       <option value="">Select Value</option> 
 
      </select> 
 
     </td> 
 
      <td> 
 
      <select ng-model="updatedData.selections[$index].row[0].name2" 
 
        ng-options="option.name as option.name for option 
 
              in data1.availableOptions" > 
 
       <option value="">Select Value</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <select ng-model="updatedData.selections[$index].row[0].name3" 
 
        ng-options="option.name as option.name for option 
 
              in data.availableOptions2" 
 
             > 
 
       <option value="">Select Value</option> 
 
      </select> 
 
     </td> 
 
     <td> 
 
      <input type="button" ng-click="addRow($index)" value="Add" 
 
           ng-show="$last"> 
 
     </td> 
 
     
 
    </tr> 
 
    </table> 
 
    <pre>{{updatedData|json}}</pre> 
 
</div>