Angularjs根据服务器响应更改复选框值

Question

我有两组复选框，用户在其中选择其选项并将其作为字符串保存到数据库。

是否有可能从服务器获取此字符串响应并将每个值都设回到相应的复选框以保持其检查？

<form class="list"> 

    <ion-toggle toggle-class="toggle-balanced" ng-model="data.turnOnOff" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.showConfirm(data.turnOnOff)">Databases</ion-toggle> 
    <div class="spacer" style="height: 10px;"></div> 

    <ion-list ng-show="bd"> 
     <ion-checkbox ng-repeat="(key, value) in db" ng-model=value.checked ng-change="checka()">{{ value.text }}</ion-checkbox> 
    </ion-list> 
    <div class="spacer" style="height: 10px;"></div> 


    <ion-toggle toggle-class="toggle-balanced" ng-model="data.escritorio" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.openEscritorio(data.escritorio)">Office</ion-toggle> 
    <div class="spacer" style="height: 10px;"></div> 

    <ion-list ng-show="officee"> 
     <ion-checkbox ng-repeat="(key, value) in office" ng-model=value.checked>{{ value.text }}</ion-checkbox> 
    </ion-list> 
    <div class="spacer" style="height: 10px;"></div> 
</form> 
<div class="spacer" style="height: 10px;"></div> 
<button style="color:#FFFFFF;" class="button button-balanced button-block" ng-click="insert()">Ok</button> 

控制器

var id = localStorage.getItem("id"); 
var checkedData = []; 

$scope.db = [ 
    {text:'Firebird', checked:'false'}, 
    {text:'MongoDB', checked:'false'}, 
    {text:'mSQL', checked:'false'}, 
    {text:'MySQL', checked:'false'}, 
    {text:'Oracle', checked:'false'}, 
    {text:'PostgreSQL', checked:'false'}, 
    {text:'TinySQL', checked:'false'}, 
    {text:'SQLite', checked:'false'}, 
    {text:'SQL Server', checked:'false'}, 
    {text:'Sybase', checked:'false'}, 
    {text:'Outros', checked:'false'} 
] 

$scope.office = [ 
    {text:'Microsoft Access', checked:'false'}, 
    {text:'Microsoft Excel', checked:'false'}, 
    {text:'Microsoft Outlook', checked:'false'}, 
    {text:'Microsoft PowerPoint', checked:'false'}, 
    {text:'Microsoft Word', checked:'false'}, 
    {text:'Open Office', checked:'false'} 
] 

$scope.data.turnOnOff = 'Off'; 
$scope.data.showConfirm = function(val){ 
    if(val === 'On'){ 
     $scope.bd = true; 
    }else{ 
     $scope.bd = false; 
    } 
} 

$scope.data.officee = 'Off'; 
$scope.data.openEscritorio = function(val){ 
    if(val === 'On'){ 
     $scope.officee = true; 
    }else{ 
     $scope.officee = false; 
    } 
} 

$scope.insert = function(){ 

    $ionicLoading.show({ 
     content: 'Loading', 
     animation: 'fade-in', 
     showBackdrop: true, 
     maxWidth: 200, 
     showDelay: 0 
    }); 

    angular.forEach($scope.db, function(key, value){ 
     if(key.checked == true){ 
      //checkedData.push(key.text); 
      checkedData += key.text + ', '; 
      console.log("database "+checkedData); 
     } 
    }); 

    angular.forEach($scope.office, function(key, value){ 
     if(key.checked == true){ 
      checkedData += key.text + ', '; 
      console.log("databases "+checkedData); 
     } 
    }); 

    checkedData = checkedData.substring(0, checkedData.length - 2); 
    console.log("result: "+checkedData); 

    InformaticaFac.getData(checkedData, id).then(function(response){ 

     console.log(JSON.stringify(response)); 

     if(response.data === "\"Error\""){ 
      $ionicLoading.hide(); 
      navigator.notification.alert("Error"); 

     }else{ 

      checkedData = response.data[0].DATABASERESP; 

     } 
    }, function(response){ 
      navigator.notification.alert("Error."); 

    }).finally(function(){ 
     $timeout(function(){ 

      $ionicLoading.hide();     
      $state.go('page3'); 

     }, 2000); 
    }); 

} 

响应

checkedData = response.data[0].DATABASERESP; 

"data":{"checkedData":"Firebird, MySQL, Oracle, Microsoft Excel, Microsoft Outlook, Microsoft PowerPoint, Microsoft Word","id":"1"} 

Answer 1

我明白了，你可以试试这个：

var checkedData = response.data 

    checkedData.checkedData.forEach(function(checkedName) { 

     $scope.db.forEach(function(dbItem){ 

      if(dbItem.text == checkedName) { 
       dbItem.checked = true; 
      } 

     }) 

     $scope.office.forEach(function(officeItem){ 

      if(officeItem.text == checkedName) { 
       officeItem.checked = true; 
      } 

     }) 

    }) 

    // if you do it in .then(function) or any async function you need to call 
    $scope.$apply() // to update checkboxes state 

UPDATE

你忘了字符串分割成数组：

checkedData.data.checkedData = checkedData.data.checkedData.split(', '); 

所以现在我们能做的.forEach功能

的jsfiddle example

Answer 2

我不得不做出一些改变，但我的最终结果基于Leguest的回答是：

checkedData= response.data[0].DATABASERESP; 
console.log(checkedData); 

checkedData = checkedData.split(', '); 
console.log(checkedData); 

angular.forEach(checkedData, function(checkedName){ 

    $scope.db.forEach(function(dbItem){ 

     if(dbItem.text == checkedName) { 
      dbItem.checked = true; 
     } 

    }); 

    $scope.office.forEach(function(officeItem){ 

     if(officeItem.text == checkedName) { 
      officeItem.checked = true; 
     } 

    }); 

});