AngularJS : Ng-Options in Array of Arrays inside select

Question

我正在尝试显示 select 下拉列表中数组数组中的选项，但它没有显示。有人可以告诉我我在这里做错了什么吗？ 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 : []
                }

            ];

如何为值指定 ng-options，它是一个根据名称过滤的数组：'TestE' 或其他？

Answer 1

你的代码有两个问题:

1# 你没有给所有的 aa,bb,cc,dd 赋值，它们都是空的

2# 过滤器会 return 你的数组，所以你需要像这样使用它的第一个元素

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

看到这个https://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview

Answer 2

你的数组没有通过正确的 json 格式..更多检查 https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 3

将子集合分配给一个数组并使用该数组填充子下拉列表：

        <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 属性 (which is basically child dropdown collection) is assigned to a scope variable childOptions which is inturn used for binding the子下拉菜单

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

Answer 4

请进行以下更改并尝试，

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

和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

AngularJS : Ng-Options in Array of Arrays inside select

javascript

arrays

angularjs

angularjs-ng-options

angularjs-select