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

    }); 

});