AngularJS:ng模型在多个下拉列表中不工作

我正在尝试基于按钮单击创建动态行。这些行有下拉框。问题是，当我添加新行并在新行中选择一个选项时，我在前几行中选择的选项也在更改，我的意思是前几行的选项没有正确绑定

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

有人能告诉我我做错了什么吗？我试着用另一个例子-

---

即使在这里，我在选择第二排和第一排时也面临同样的问题。使用r.data.model绑定每行的值是否错误

我更新了你的plunker以使其工作：

在重新定义选项菜单时，您没有定义模型是什么（旁注：您应该在过滤器中利用下划线.js的函数动态创建适当的显示选项）

无论如何，在addRow（）函数中，我将其更改为：

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

        ]
    };
}

为此：

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

        ]
    };
}

如果有帮助，请告诉我

更新：

我从头开始重新创建了这个功能，因为我觉得你想得太多了。这里只需要非常简单的ng repeat、ng选项和ng模型绑定

<tr ng-repeat="r in rows track by $index">
     <td> 
        <select ng-model="r.name" 
               ng-options="option.name as option.name for option 
                                       in availableOptions">
            <option value="">Select Value</option>
        </select>
     </td>
     <td> 
         <input type="button" ng-click="addRow()" value="Add">
     </td>
     <td>
         <input type="button" ng-click="deleteRow($index)" 
             value="Delete">
    </td>
</tr>

---

我还没有加入差异的东西，但它应该很容易。

它仍然没有约束力。当我在新行中选择“添加”和“选择选项”时，第一行也会更改。您能告诉我代码中的错误吗？我只是尝试了一下。我试图让它工作的代码在问题中，好吧，我做了一个新的plunkr，它比原来的要简单得多，因为我认为你真的想得太多了。谢谢你，克里斯。但是新的plunker在select中没有显示任何选项。我的问题是有多个下拉列表，其中一个下拉列表基于另一个下拉列表的值。由于我是AngualJs的新手，这个概念让我很困惑。我认为使用r.data.model应该为每一行创建新的模型。错了吗？@user3407267很抱歉我在玩它，选项现在显示出来了！

<tr ng-repeat="r in rows track by $index">
     <td> 
        <select ng-model="r.name" 
               ng-options="option.name as option.name for option 
                                       in availableOptions">
            <option value="">Select Value</option>
        </select>
     </td>
     <td> 
         <input type="button" ng-click="addRow()" value="Add">
     </td>
     <td>
         <input type="button" ng-click="deleteRow($index)" 
             value="Delete">
    </td>
</tr>

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

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

  $scope.rows = [{name:""}];

  $scope.addRow = function(){
    $scope.rows.push({name:""});
  }

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

            ];

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