AngularJS：配列内の配列の選択肢内の選択

配列の配列から選択肢を表示する際に、ドロップダウン内の選択肢を表示しようとしていますが、表示されません。誰かが私がここで間違っていることを教えてもらえますか？ https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview AngularJS：配列内の配列の選択肢内の選択

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-オプションを指定してください： 'TESTE' または何かを？

出典

2017-02-07 user3559583

、

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を、してみてくださいdは？それはすべてのデータがありません – Sajeetharan

@ Sajeetharan私は最初のドロップダウンで選択されたオプションに基づいて価値を得る必要があります。それはなぜフィルタリング。私はそれを間違ってやっていますか？ – user3559583

ザ・二つはあなたのコード罪の問題です：あなたはすべてのAA、BB、CCに値を割り当てなかった

1＃を、彼らはあなたがする必要があるので、空

2＃フィルターがあなたの配列を返しますだったddをこのhttps://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview

出典

2017-02-07 05:40:05

あなたの配列はもっとそれをチェック..ための正しいJSON形式を通じて来ていない参照してください。この

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

のようにその第一要素を使用

出典

2017-02-07 05:47:43

アレイに子コレクションを割り当て、子ドロップダウンを移入するためにその配列を使用する：

ここ

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

、親のドロップダウンを選択したときに、（基本的に子ドロップダウン・コレクションである）valueプロパティが割り当てられていますこれにより、次に子ドロップダウン

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

出典

2017-02-07 05:53:58 Developer

以下は変更してくださいを結合するために使用されているスコープ変数childOptionsへなぜあなたは再びフィルタリングしている

<!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="[email protected]" 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-07 05:56:50

AngularJS：配列内の配列の選択肢内の選択

答えて

関連する問題