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>

Мой угловой код 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'}
                    ]
                };

            }
        };

    }]);

Может ли кто-нибудь сказать мне, что я делаю неправильно здесь?


person user3407267    schedule 06.02.2017    source источник
comment
вы должны определить новый model для нового раскрывающегося списка.   -  person Hadi J    schedule 06.02.2017


Ответы (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>

person Hadi J    schedule 06.02.2017
comment
Спасибо, ХадиДжаз. Нужно ли мне создавать updatedData.selections для каждого раскрывающегося списка? - person user3407267; 07.02.2017
comment
ng-model=r.data.model не должен создавать новую модель - person user3407267; 07.02.2017
comment
@hadjJz plnkr.co/edit/Jw5RkU3mLuGBpqKsq7RH?p=preview добавляя больше раскрывающихся списков, но все же первый меняется, когда я меняю второй - person user3407267; 07.02.2017
comment
@hadjJz: Моя проблема связана с несколькими раскрывающимися списками, где 1 раскрывающийся список основан на значении другого раскрывающегося списка. так как я новичок в AngualJs, эта концепция меня очень сбивает с толку. Я думал, что использование r.data.model должно создавать новую модель для каждой строки. Это неправильно? - person user3407267; 07.02.2017
comment
Извините. я вижу ваши комментарии в настоящее время. - person Hadi J; 07.02.2017
comment
@haldiJz: 3 выпадающих списка. Но первое выпадающее меню является статическим и имеет 8 значений, тогда как второе выпадающее меню является динамическим. Он получает значение на основе выбранного варианта с 1-го. 3-й тоже статичен. - person user3407267; 07.02.2017
comment
@haldiJz: Проблема во втором раскрывающемся списке. Всякий раз, когда я меняю первое раскрывающееся меню в новой строке, секунды в предыдущем также меняются - person user3407267; 07.02.2017
comment
Да . Я знаю :( - person Hadi J; 07.02.2017
comment
Я пробую другой метод, но он не отображает значения для второго раскрывающегося списка: plnkr.co/ edit/HMYbTNzkqkbAGP7PLWWB?p=preview - person user3407267; 07.02.2017
comment
name2 не меняется в зависимости от имени. - person user3407267; 07.02.2017
comment
@haldiz Большое спасибо :) Так что в основном вы каждый раз создаете новую модель с индексом - person user3407267; 07.02.2017
comment
Рад помочь вам :) - person Hadi J; 07.02.2017