angularjs中的ng-repeat中的嵌套下拉-ng-options答案

【问题标题】：Nested Dropdown- ng-options inside ng-repeat in angularjsangularjs中的ng-repeat中的嵌套下拉-ng-options
【发布时间】：2018-03-21 02:56:36
【问题描述】：

我想在孩子选择时捕获父母姓名和 ID。

输出应该是：

$scope.selected = [{"name": "Request1", "id":1,
                    "status":[{"name":"status1","isSelected":true},
                              {"name":"status2","isSelected":false}]
                   }]

能够得到选定的孩子，但各自的父母没有得到。

// Code goes here

var app = angular.module('demo', []);


app.controller('myController', function($scope){
    $scope.requests=[{"name": "Request1", "id":1}, 
                     {"name": "Request2", "id":2},{"name": "Request3", "id":3}
                    ];
    $scope.statusList =[{ "name": "status1", "isSelected": true },
                        { "name": "status2", "isSelected": false }
                        ]
      function initializeRequestStatus() {
        angular.forEach($scope.requests, request => {
          request.statusList = angular.copy($scope.statusList);
        })
      };

      initializeRequestStatus();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<div class="container" ng-controller="myController">
    <div>
        
        <ul ng-repeat="request in requests">
            {{request.name}}
            <li>
                <select class="form-control" ng-options="status as status.name for status in request.statusList"  ng-model="request.selectedStatus" multiple></select>
            </li>
        </ul>
       
        <ul>
          <li  ng-repeat="request in requests">{{request.selectedStatus}}</li>
        </ul>
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： angularjs angularjs-ng-repeat dropdown ng-options

【解决方案1】：

您可以使用 $index 来获取父名称和 ID。

// Code goes here

var app = angular.module('demo', []);


app.controller('myController', function($scope){
    var result = [];
    $scope.requests=[{"name": "Request1", "id":1}, 
                     {"name": "Request2", "id":2},{"name": "Request3", "id":3}
                    ];
    $scope.statusList =[{ "name": "status1", "isSelected": true },
                        { "name": "status2", "isSelected": false }
                        ];
    
    $scope.getParent = function(index, selectedState){
      result = [];
      var req = {
        "name": $scope.requests[index].name, 
        "id": $scope.requests[index].id, 
        "status": selectedState
      }
      result.push(req);
      console.log("result",result);
      return angular.toJson(result);
    };
    
    function initializeRequestStatus() {
        angular.forEach($scope.requests, request => {
          request.statusList = angular.copy($scope.statusList);
        })
      };

      initializeRequestStatus();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<div class="container" ng-controller="myController">
    <div>
        
        <ul ng-repeat="request in requests">
            {{request.name}}
            <li>
                <select class="form-control" ng-click="getParent($index, request.selectedStatus)" ng-options="status as status.name for status in request.statusList"  ng-model="request.selectedStatus" multiple></select>
            </li>
        </ul>
       
        <ul>
          <li  ng-repeat="request in requests">{{request.selectedStatus}}</li>
        </ul>
    </div>
</div>
</body>
</html>

【讨论】：

如何将父级详细信息与他们各自选择的子级一起推送以获取 json 作为我给出的输出
@RaaZuSaH 结果 json 是哪个父级和哪个选定的子级。请看我的失败者，我在 json 中返回了输出。 plnkr.co/edit/9ZKjrDC0tjlLcfpRGy9w?p=preview
我已经在问题中提到输出应该是带有父子详细信息的 json 格式。父（请求）和子（状态列表）
我当前的json是这个。 [{"name":"Request2","id":2,"status":[{"name":"status1","isSelected":true}]}]
如果你希望你的输出和 thenquestion 一样，那么将 $scope.statusList 传递给 status key 。