Using Ng-options in AngularJS to populate a select dropdown with an array of arrays

Question

Using Ng-options in AngularJS to populate a select dropdown with an array of arrays

I'm encountering an issue with displaying options from an array of arrays in a select dropdown. Can someone point out what I might be doing wrong? Check out my code here: https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview

Here's the HTML snippet:

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

And here's the relevant JavaScript section:

 var bb = [];
  ... (content omitted for brevity, see original text)

  $scope.availableOptions = [
                { name: 'TestA',
                  value : aa
                },
                { name: 'TestB',
                  value : bb
                },
                { name: 'TestC',
                  value : cc
                },
                { name: 'TestD',
                  value : dd
                },
                { name: 'TestE',
                  value : []
                }
            ];

My question is, how can I specify the ng-options for the "value" which is an array filtered based on name: 'TestE' or something similar?

javascript arrays angularjs angularjs-ng-options angularjs-select

Answer 1

Answer №1

There are a couple of issues in your code:

1# The variables aa, bb, cc, dd have not been assigned any values and remain empty.

2# When using the filter function, it will return an array, so you should access the first 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>

You can view an updated version here: https://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview

Answer 2

There are a couple of issues in your code:

1# The variables aa, bb, cc, dd have not been assigned any values and remain empty.

2# When using the filter function, it will return an array, so you should access the first 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>

You can view an updated version here: https://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview

Answer 3

Answer №2

The data in your array is not formatted correctly as JSON. For more information, please refer to the following link: https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 4

The data in your array is not formatted correctly as JSON. For more information, please refer to the following link: https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 5

Answer №3

To populate the child dropdown, first store the child collection in an array and then use that array:

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

In this code snippet, after selecting an option from the parent dropdown, the value property (representing the child dropdown collection) is stored in a variable called childOptions. This childOptions variable is then used to populate the child dropdown.

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

Answer 6

To populate the child dropdown, first store the child collection in an array and then use that array:

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

In this code snippet, after selecting an option from the parent dropdown, the value property (representing the child dropdown collection) is stored in a variable called childOptions. This childOptions variable is then used to populate the child dropdown.

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

Answer 7

Answer №4

Kindly implement the suggested modifications and proceed with testing,

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

Additionally in the HTML section,

<!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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7868980928b8695c98d94a7d6c9d3c99f">[email protected]</a>" 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>

Answer 8

Kindly implement the suggested modifications and proceed with testing,

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

Additionally in the HTML section,

<!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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7868980928b8695c98d94a7d6c9d3c99f">[email protected]</a>" 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>

Using Ng-options in AngularJS to populate a select dropdown with an array of arrays

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ensuring the successful execution of all AJAX calls (not just completion)

Steps to transfer extra files such as config/config.yaml to the .next directory

Exploring the powerful trio of Node.js, MySQL, and asynchronous iterative functions

Switching classes in jQuery for Internet Explorer 8

Adjust the size of an image within a canvas while maintaining its resolution

Is it necessary to insert a thread sleep in HtmlUnit before clicking a button?

What could be causing this test to fail when testing my API endpoint?

Delivering seamless css integration using express.js

Is Dealing with Multiple AJAX Requests a Pain?

Is there a way to verify the custom form when the braintree PayPal checkout button is clicked?

What is the best way to loop through ng-repeat with key-value pairs in order to display each

Is there a way to automatically change the display of an element once the user has closed the menu?

Creating point illustrations with Three.js

Is there a way to export the HTML table content to an Excel sheet that is compatible with browsers such as Internet Explorer, Mozilla Firefox, and others?

What is the order of execution for AngularJS directives?

I have successfully implemented the Context API in my Next.js project and everything is functioning smoothly. However, I encountered an error while using TypeScript

Adjust the color of the button and update the text using AngularJS

Instructions for updating the Modal Value using ajax

Ways to determine the total amount of days in a given month

Refreshing data in AngularJs is like pressing the reset button for