Question

我希望在数据保存到mysql数据库后加载页面时显示用户选中的复选框的状态。

我使用以下代码，但我无法设置它：

<div class="btn-group " ng-repeat="room in classrooms">
      <label class="btn btn-default" ng-model="checkModel[room.Id]" 
          uib-btn-checkbox>{{ room.Name }} 
     </label>
</div>

控制器：

//this binds the data

  Organisation.getAllClassrooms().then(
    function(data){
        $scope.classrooms = data.data;
    }
  )

  $scope.checkResults = [];

  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
        if (value) {
            $scope.checkResults.push(key);
        }
    });
  });

 $scope.Save = function()
 {
   var selClassrooms ='';
    for (var i = 0; i < $scope.checkResults.length; i++)
    {
        selClassrooms+=$scope.checkResults[i]+':';
    }
     ... do the save to db
 }

...我通过获取所选的id来保存在db（14:15:18）中然后我需要再次显示在加载页面时选择了哪些。

为此，我从服务中检索数据并将其转换为如下所示的数组：

 $scope.selrooms = data.data[0]['ActivityReportClassrooms'].split(':');

现在如何创建对象模型，以便设置要检查的15,15,18按钮的状态？

我可以像下面那样对它进行硬编码并正确设置但我需要遍历$ scope.selrooms然后检查用户已保存的那些：

$scope.checkModel = {};

$scope.checkModel = {
    14: true,
    4: false,
    18: true
};

Answer 1

你可以遍历$ scope.selrooms

angular.forEach($scope.selrooms, function (roomId) {
    if($scope.checkModel[roomId]) {
        //if roomId exists in model set to true
        $scope.checkModel[roomId] = true;
    }
};

希望这有助于：）

设置要在Angular中检查的ui-btn-checkboxes状态

1 个答案: