javascript - 如何在 Angular Controller 中将复选框标记为已选中

Question

我有一个表单，用于输入新的服务请求以及显示和编辑这些请求。该表格的一部分是带有标记的复选框列表，代表所有国家/地区。当使用此表单显示现有请求时，我需要能够将每个国家/地区复选框与最初选择的国家/地区列表进行比较，并将每个匹配项标记为“已选中”。换句话说，我需要恢复复选框列表的状态以反射(reflect)最初检查的内容。这种类型的逻辑是否应该通过迭代两个嵌套循环(所有国家/地区与选定国家/地区)在 Controller 中处理，还是有更好的方法使用指令来执行此操作？

这是我的复选框列表:

<div class="form-group">
                        <label for="selectbasic">What country is the data for</label>
                        <div>
                            <div style='height:100px;overflow-y:auto;border:solid 1px #aaa;'>
                                <div ng-repeat="item in countries">
                                    <input type='checkbox' ng-model="item.checked" ng-change="checkit()" />&nbsp;&nbsp; {{item.name}}
                                </div>

                            </div>
                        </div>
                    </div>

这是我的 Controller 的一部分，我可以在其中处理这个问题:

function getServiceRequestById(Id) {
            dataFactory.getServiceRequestById(Id)
                .success(function (request) {
                    $scope.OID = request.OID;
                    $scope.Description = request.Description;
                    $scope.RequestorName = request.RequestorName;
                    $scope.RequestorBusinessUnit = request.RequestorBusinessUnit;
                    $scope.CustomerName = request.CustomerName;
                    $scope.CscContactPerson = request.CscContactPerson;
                    $scope.IsWbsCodeAvailable = request.IsWbsCodeAvailable;
                    $scope.SalesforceIdNumber = request.SalesforceIdNumber;
                    $scope.ProjectCtv = request.ProjectCtv;
                    $scope.RequestedCompletionDate = request.RequestedCompletionDate;
                    $scope.ToBeUsedForCloudMigration = request.ToBeUsedForCloudMigration;
                    $scope.ToBeUsedForDatacenterMove = request.ToBeUsedForDatacenterMove;
                    $scope.ToBeUsedForServerRefresh = request.toBeUsedForServerRefresh;
                    $scope.DataRequirements = request.DataRequirements;
                    $scope.DataProtectionRequirements = request.DataProtectionRequirements;
                    $scope.ProjectedDataAvailability = request.ProjectedDataAvailability;
                    $scope.DiscoveryLeadName = request.DiscoveryLeadName;
                    $scope.SelectedCountries = request.SelectedCountries;
                    $scope.ManualDiscovery = request.ManualDiscovery;
                    $scope.AutomatedDiscovery = request.AutomatedDiscovery;
                    $scope.DataLoadUsingMasterTemplate = request.DataLoadUsingMasterTemplate;
                    $scope.DataLoadUsingAutomatedInterface = request.DataLoadUsingAutomatedInterface;
                    $scope.DataLoaderRequiresSitizenship = request.DataLoaderRequiresSitizenship;


                    var list = [];

                    var countries = request.SelectedCountries.split(',');

                    console.log('number of countries:  ' + countries.length);

                    console.log('countries[0]:  ' + countries[0] + ' --- ' + countries[1]);

                    $scope.checkit = function () {

                        for (var p in $scope.countries) {
                            if ($scope.countries[p].checked) {
                                list.push($scope.countries[p].name);

                                console.log("selected country:  " + $scope.countries[p].name + "  " + $scope.ProjectedDataAvailability);
                            }
                        } return list;
                    }
                    console.log('EditServiceRequestCtrl  request :   ' + request);

                })
                .error(function (error) {
                    console.log('getServiceRequestById returned error   ');
                });
        }

Answer 1

尝试这样的事情:

function getServiceRequestById(Id) {
  dataFactory.getServiceRequestById(Id)
        .success(function (request) {
             $scope.data = request;
             $scope.selectecCountries = []; //make sure to clear selections
             $scope.countries = request.SelectedCountries.split(',');
        });
}

$scope.updateSelectedCountries = function() {
    var list = [];
    angular.forEach($scope.countries, function(country) {
       if(country.selected) list.push(country);
    });
    $scope.selectedCountries = list;
};

那么在你看来:

<div ng-repeat="country in countries track by $index">
    <input type="checkbox" ng-model="country.selected" ng-change="updateSelectedCountries()"/>
</div>

<h4>Demo Output</h4>
<pre>{{ selectedCountries | json}}</pre>