Javascript 如何将所有国家的列表填充到“选择多个”，然后确定选择了哪些国家

在我的Angular应用程序中，我的任务是向用户显示所有国家的“选择多个”列表，并在用户做出多个选择后，确定选择了哪些国家

我知道如何在标记内部使用ng repeat，但我不知道如何在控制器中正确填充$scope.countries模型数组。（我唯一的猜测是将整个国家/地区列表保存在数据库中，然后使用ng init将所有记录推送到$scope.countries数组中，但我不确定这是否是最好的方法） 我的第二个挑战是，在选择了一个或多个项目之后，能够迭代选择对象，并确定选择了哪一个项目。 当前，我的选择如下所示：

<div class="form-group">
                        <label for="selectbasic">What country is the data for</label>
                        <div>
                            <select type="text" class="form-control multiselect multiselect-icon" multiple="multiple"  ng-model="SelectedCountries">
                                <option ng-repeat="country in countries">
                                {{country.name}}
                                </option> 
                            </select> 
                        </div>
                    </div>

$scope.countries = [
        {
            name: "US"
        },
        {
            name: "UK"
        },
        {
            name: "France"
        }
];

试试这个：

以下是它的要点：

<div ng-app="myApp">
  <div ng-app="myApp" ng-controller="con">
    <div ng-repeat="item in countries">
        <input type='checkbox' ng-model="item.checked" />{{item.name}}
    </div>
    <button ng-click="checkit()">Check it</button>
  </div>
</div>

---

这里有一个类似的帖子：这很好！你知道有什么方法可以将这个复选框列表包装到一些可滚动的容器中吗？由于我必须列出所有国家的名单，我不希望它独自占据整个页面-尤杰尼刚刚更新了小提琴。复选框在一个可滚动的容器中，还有一个常规的

选项。这太棒了！非常感谢你帮助我！

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

myApp.controller('con', ['$scope', function($scope){
  $scope.countries = [
    {id:'us', name: 'United States', checked: false},
    {id:'fr', name: 'France', checked: false},
    {id:'sw', name: 'Sweden', checked: true}
  ];
  $scope.checkit = function(){
    var list = [];
    for(var p in $scope.countries){
        if($scope.countries[p].checked){
            list.push($scope.countries[p].name);
        }
    }
    alert(list);
  };
}]);