2

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

            ];

如何为 value 指定 ng-options，它是基于 name: 'TestE' 或其他内容过滤的数组？

4

4 回答 4

3

您的代码有两个问题：

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

于 2017-02-07T05:40:05.683 回答
0

你的数组不是通过正确的 json 格式来的.. 更多检查它 ht​​tps ://docs.angularjs.org/api/ng/directive/ngOptions

于 2017-02-07T05:47:43.963 回答
0

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

        <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 valueproperty (which is basically child dropdown collection) is assigned to a scope variable childOptionswhich is inturn used for binding the child dropdown

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

于 2017-02-07T05:53:58.530 回答
0

请进行以下更改并尝试，

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>
于 2017-02-07T05:56:50.287 回答