在angularjs中ng-repeat内的嵌套Dropdown-ng-options

时间:2017-10-09 20:09:59

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

我想在儿童选择中捕捉父母姓名和身份证。

输出应为:

$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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-2)

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

&#13;
&#13;
// 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();
});
&#13;
<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>
&#13;
&#13;
&#13;