Question

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

这是我的复选框列表：

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

这是我的控制器的一部分，我可以在其中处理：

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>

Answer 2

看起来您正在获取一个国家/地区列表，其中每个项目都有一个“已选中”成员。

我还假设您要显示所有国家/地区，而不仅仅是已检查的国家/地区。

如果是这样的话，那很简单。

   <div ng-repeat="item in countries">
        <input type='checkbox' ng-model="item.checked"  /> {{item.name}}
    </div>


  $scope.countries = [ {name: "USA", checked: true},
                       {name: "GBR", checked: false},
                       {name: "GER", checked: true}];

查看有效的plunker。

如何在Angular控制器中选中复选框

2 个答案: