javascript - Angular : Ng-Options in Array of Arrays inside select

Question

我正在尝试在选择下拉列表中显示数组数组中的选项，但它没有显示。有人可以告诉我我在这里做错了什么吗？ 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# 过滤器会返回你的数组，所以你需要像这样使用它的第一个元素

       <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