AngularJS：ng-model 不能在多个下拉列表中工作

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>

我的 Angular 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'}
                    ]
                };

            }
        };

    }]);

有人可以告诉我我在这里做错了什么吗？我尝试了另一个示例 - https://plnkr.co/edit/Jw5RkU3mLuGBpqKsq7RH?p=preview 即使在这里我在选择第二行第一行时也面临同样的问题。使用 r.data.model 绑定每一行的值是错误的吗？

Answer 1

我更新了你的 plunker 来工作：

https://plnkr.co/edit/4sJHHaJPEuYiaHjdnFBp?p=preview

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

无论如何，在您的 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-options 和 ng-model 绑定。

<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);
    }
});

我还没有加入不同的东西，但应该很容易。