javascript - 获取 AngularJS 中动态生成的下拉列表的选定值

Question

我有这个表单，用户可以在其中上传文章，并且可以选择添加一些共同作者。如果他想添加共同作者，他将单击一个按钮，该按钮将动态生成一个包含其他用户列表的下拉菜单。

问题是我动态生成这些选择菜单，因此每个菜单都有不同的 ng-model。这是 Controller 中的代码:

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

你可以做类似的事情，创建选择并隐藏他