如何將所有選中的單選按鈕的數據從模式窗口發送到父級控制器？

Question

我得到了這個問題

在我宣佈ID列表中mainController，叫ALLUSERS，我送他們到模態窗口與單選按鈕來顯示，每個單選按鈕具有不同的名稱，以使多選擇，但都具有相同的ng模型，selectedUsers，即。

一旦我選擇了幾個顯示的用戶，我按下OK按鈕，誰觸發$ scope.ok函數，在for循環中，我想獲得所有我選擇的用戶，並將它們推入列表中， selectedUserIds。

但是，一旦我運行代碼，我selectedUsers列表是空的（但我選擇了3個用戶）

所以，在最後，有兩個可能的問題。

1. 我從他們的單選按鈕和獲取數據的編碼是錯誤
2. 我甚至不從模態窗口將數據發送到主控制器

我希望你能幫助我...

這裏是代碼：

mainController.js

 $scope.allUsers = [0,1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20]; 
     $scope.selectedUserIds = []; 

     $scope.ok = function() { 
      angular.forEach($scope.selectedUsers, function(user) { 
       $scope.selectedUserIds.push(user); 
      }); 
     } 


     $scope.open = function() { 
      var modalInstance = $uibModal.open({ 
      scope: $scope,     
      templateUrl: '../Popup.html', 
      resolve: { 
        allUsers: function() { 
         return $scope.allUsers; 
        }      
        } 
      }); 

     } 

的index.html

<button ng-click="open()">Share Script</button> 

Popup.html

<div class="modal-header"> 
    <h3 class="modal-title">Share the Script</h3> 
</div> 


<div class="modal-body"> 
<h4>Check the users who you want to share the selected script!</h4> 
<ul> 
    <label ng-repeat="user in allUsers"> 
    <input type="radio" name={{user}} ng-value="{{user}}" ng-model="selectedUsers" 
    /> {{user}} user 
    </label> 

</ul> 



</div> 


<div class="modal-footer"> 
    <button class="btn btn-default" type="button" ng-click="ok();$close()">Ok</button> 
    <button class="btn btn-warning" type="button" ng-click="$close()">Cancel</button> 
</div> 

Answer 1

我找到了答案，我將它張貼在這裏，如果有人有相同的問題，因爲我....

mainController

$scope.allUsers = [0,1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20]; 
    $scope.selectedUserIds = []; 

    $scope.open = function() { 
     var modalInstance = $uibModal.open({ 
     scope: $scope, 
     controller: 'modalController'  //<<<<<here is a new controller 
     templateUrl: '../Popup.html', 
     resolve: { 
       allUsers: function() { 
        return $scope.allUsers; 
       }      
       } 
     }); 

     //add here the code to receive the data 
     //look bellow, and read the answer 

    } 

modalController

var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap']); 
//side note, the main controller belongs to myApp module as well 

myApp.controller('modalController', function($scope, $uibModalInstance, 
    $modalInstance, users) { 

$scope.items = users; 
$scope.selectedUsers = []; 

$scope.addUsersToList = function(users) { 
    //not finished 
    //add the users from the selected radio buttons to a list 
    //lets call the list: $scope.finalList 
} 

$scope.ok = function() { 
    $uibModalInstance.close($scope.finalList); //here u send back the data 
}; 

$scope.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
}; 

}）;

然後在mainController，你需要準備好接收數據

modalInstance.result.then(function (selectedUsers) { 
     $scope.selectedUsers.push(selectedUsers); //here you get the data from the moduleController 
}, function() { 
     console.log('Modal dismissed at: ' + new Date()); 
}); 

此代碼，您需要添加到上述標記位置 - > //這裏添加代碼接收數據

然後，你可以做任何你想做:)