Nested Dropdown- ng-options inside ng-repeat in angularjs

问题

I wants to catch parent name and id on child selection.

Output should be:

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

Able to get selected child but respective parent not getting.

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

回答1:

You can utilize the $index for getting the parent name and 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>

来源：https://stackoverflow.com/questions/46654233/nested-dropdown-ng-options-inside-ng-repeat-in-angularjs

标签

angularjs

angularjs-ng-repeat

dropdown

ng-options