AngularJS : Ng-Options in Array of Arrays inside select

Question

I am trying show options from array of array inside a select drop down but it is not showing up. Can someone tell me what I am doing wrong here ? https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview

HTML :

<div ng-controller="MainCtrl">
   <table>
     <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> 
              <select ng-model="r.value"
       ng-options="opt.name for opt in option.value for option  in availableOptions | filter:{name: r.name}">
       <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>
  </table>

  <div>
    {{rows}}
  </div>

JS :

 var bb = [];
  bb.push({name:"CCCC"});
  bb.push({name:"AAAA"});
  bb.push({name:"DDDD"});  

   var aa = [];
  aa.push({name:"CCCC"});
  aa.push({name:"AAAA"});
  aa.push({name:"BBBB"}); 

   var cc = [];
  cc.push({name:"BBBB"});
  cc.push({name:"AAAA"});
  cc.push({name:"DDDD"});


   var dd = [];
  dd.push({name:"CCCC"});
  dd.push({name:"AAAA"});
  dd.push({name:"CCCC"});

  $scope.availableOptions = [
                { name: 'TestA',
                  value : aa
                },
                { name: 'TestB',
                value : bb
                },
                { name: 'TestC',
                value : cc

                },
                { name: 'TestD',
                  value : dd

                },
                { name: 'TestE',
                  value : []
                }

            ];

How do I specify the ng-options for value which is an array filtered based on name: 'TestE' or something ?

@Sajeetharan I need to get value based on the option selected in first drop down. Thats why filtering. Am I doing it incorrectly ? — user3559583, Feb 07 '17 at 05:28

score 3 · Accepted Answer · answered Feb 07 '17 at 05:40

The are two problem sin your code :

1# you did not assign value to all aa,bb,cc,dd they were empty

2# Filter would return you array so you need to use its 1st element like this

       <select ng-model="r.value" 
               ng-options="option.name as option.name for option 
                                       in (availableOptions | filter:{name: r.name})[0].value">
            <option value="">Select Value</option>
        </select>

See this https://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview

score 0 · Answer 2 · answered Feb 07 '17 at 05:47

0

Your array are not coming through correct json format.. for more check it https://docs.angularjs.org/api/ng/directive/ngOptions

answered Feb 07 '17 at 05:47

Satish Rajput

49
3

score 0 · Answer 3 · answered Feb 07 '17 at 05:53

Assign the child collection to an array and use that array for populating the child dropdown:

        <select ng-model="selectedChildren" 
               ng-options="option.value as option.name for option 
                                       in availableOptions"
                data-ng-change="childOptions = selectedChildren">
            <option value="">Select Value</option>
        </select>

        <select ng-model="value" 
               ng-options="option as option.name for option 
                                       in childOptions track by $index">
            <option value="">Select Value</option>
        </select>

Here, when parent dropdown is selected, the value property (which is basically child dropdown collection) is assigned to a scope variable childOptions which is inturn used for binding the child dropdown

https://plnkr.co/edit/mXz8jpzTrnRoqx5r7b1W?p=preview

score 0 · Answer 4 · answered Feb 07 '17 at 05:56

Please make the following changes and try,

var app = angular.module('plunker', []);
app.filter('ddOptions')
app.controller('MainCtrl', function($scope) {

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

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

  var bb = [];
  bb.push({name:"CCCC"});
  bb.push({name:"AAAA"});
  bb.push({name:"DDDD"});  

   var aa = [];
  aa.push({name:"CCCC"});
  aa.push({name:"AAAA"});
  aa.push({name:"BBBB"}); 

   var cc = [];
  cc.push({name:"BBBB"});
  cc.push({name:"AAAA"});
  cc.push({name:"DDDD"});


   var dd = [];
  dd.push({name:"CCCC"});
  dd.push({name:"AAAA"});
  dd.push({name:"CCCC"});

  $scope.availableOptions = [
                { name: 'TestA',
                  value : aa
                },
                { name: 'TestB',
                value : bb
                },
                { name: 'TestC',
                value : cc

                },
                { name: 'TestD',
                  value : dd

                },
                { name: 'TestE',
                  value : []
                }

            ];

  $scope.populateOptions = function(name){
    var temp = $scope.availableOptions.filter(function(val){ return val.name === name;  })
    console.log(temp);
    $scope.secondOptions = temp[0].value;
  }
  $scope.deleteRow = function(index){
    $scope.rows.splice(index,1);
    }
});

and HTML,

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  </head>

<body>
<div ng-controller="MainCtrl">
   <table>
     <tr ng-repeat="r in rows track by $index">
         <td> 
            <select ng-model="r.name" ng-change="populateOptions(r.name)" 
                   ng-options="option.name as option.name for option 
                                           in availableOptions">
                <option value="">Select Value</option>
            </select>
         </td>
          <td> 
            <select ng-model="r.value" 
                   ng-options="option.name as option.name for option 
                                           in secondOptions">
                <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>
  </table>

  <div>
    {{rows}}
  </div>
</div>
  </body>

</html>

AngularJS : Ng-Options in Array of Arrays inside select

4 Answers4