AngularJSで動的に生成されたドロップダウンの選択値を取得

Question

私はこのフォームをユーザーが記事をアップロードし、いくつかの共著者を追加するオプションを持っています。共著者を追加したい場合、彼は他のユーザのリストを含むドロップダウンメニューを動的に生成するボタンをクリックする。

問題

は私が動的にそれらの選択メニューを生成していますということですので、それらのそれぞれが異なるng-model.Hereは、コントローラからのコードである必要があります。

$scope.numberOfCoauthors = 0; 
$scope.addCoauthors = function() { 
    $scope.index = "input_" + $scope.numberOfCoauthors; 
    console.log("Scope.model : " + $scope.index); 
    var $div = $("<p> Coautor: </p> <select ng-model='" + $scope.index + "'" + 
      " ng-options='user.username for user in allUsers' </select>" + 
      "<pre> {{ " + $scope.index + " | json }} </pre>") 
    var target = angular.element(document.querySelector('#coauthors')); 

    angular.element(target).injector().invoke(function($compile) { 
     var addedSelect = angular.element(target).scope(); 
     target.append($compile($div)(addedSelect)); 
     //$scope.$apply(); 
     }); 
    $scope.numberOfCoauthors++; 
} 

$scope.getSelectedValues = function() { 
    if($scope.numberOfCoauthors > 0) { 
     for(i=0; i<$scope.numberOfCoauthors; i++) { 
      var inputName = "input_"+i; 
      console.log(inputName); 
      console.log($scope.inputName); 
     } 

    } 
} 

私が取得しようとしています$ scope.inputName私は定義されていないので、これらのモデルは実際にスコープに追加されていないと思いますが、実際に追加する方法はわかりません。

Answer 1

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

 
myApp.controller('controller', ['$scope', function($scope) { 
 
    $scope.users = [{id:1,username:"julien"},{id:2,username:"robert"}]; 
 
    
 
    $scope.coAuthors = []; 
 
    $scope.coAuthor = {}; 
 
    
 
    $scope.addCoauthor = function(){ 
 
    $scope.coAuthors.push($scope.coAuthor); 
 
    }; 
 
    
 
    $scope.coAuthorShow = false; 
 

 
    
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="controller"> 
 
    <div ng-show="coAuthorShow"> 
 
    <div ng-repeat="coA in coAuthors">{{coA.username}}</div> 
 
    <select name="mySelect" id="mySelect" 
 
     ng-options="user.username for user in users" 
 
     ng-model="coAuthor"></select> 
 
    <button ng-click="addCoauthor()">ADD CoAuthor</button> 
 
    </div> 
 
    <button ng-click="coAuthorShow = !coAuthorShow">Add coAuthors</button> 
 
</div>

あなたは、そのような何かを選択を作成し、彼に