Angular - 存儲複選框值並顯示它們

Question

假設您有27個複選框，我們稱它們爲'categories'。這些複選框位於一個部分中，您可以選擇多個部分並保存。

問題是：如果你保存了表單，這些類別將被添加到你的配置文件中，在MySQL中。

我的問題是：

• 我應該如何命名的車型，

• 我應該如何發送表單後，德值存儲

我有一個解決方案，這，我保存了第n個類別，然後在加載時點擊它們，但這不是最好的。

下面是代碼：

$scope.getSelectedCats = function() //Returning array: [1,4,5,6] 
{ 
    $return_array = []; 
    $i = 0; 

    if($scope.whoareu.develop){ $return_array[$i] = 1; $i++;} 
    if($scope.whoareu.design){ $return_array[$i] = 2; $i++;} 
    if($scope.whoareu.produce){ $return_array[$i] = 3; $i++;} 
    if($scope.whoareu.repair){ $return_array[$i] = 4; $i++;} 
    [...] 

    return $return_array; 

} 

HTML

<p> 
    <input ng-model="whoareu.develop" type="checkbox" value=1 id="WAY8" name="whoareu" /> 
    <label for="WAY8">Develop</label> 
    </p> 
    <p> 
    <input ng-model="whoareu.design" type="checkbox" value=2 id="WAY9" name="whoareu" /> 
    <label for="WAY9">Design</label> 
    </p> 
    <p> 
    <input ng-model="whoareu.produce" type="checkbox" value=3 id="WAY10" name="whoareu" /> 
    <label for="WAY10">Produce</label> 
    </p> 
    <p> 
    <input ng-model="whoareu.repair" type="checkbox" value=4 id="WAY11" name="whoareu" /> 
    <label for="WAY11">Repair</label> 
    </p> 
    [...] 

而在去年，裝載檢查一個非常醜陋的解決方案：

<?php 
    //$dbData = Data row from mysql, in object, by Wordpress 
    echo "setTimeout(function(){"; 
    foreach(explode(',', $dbData->interested_in) as $val) 
    { 
    //echo "$('input:checkbox[name=whatareu]').filter('[value=$val]').click();"; 
    echo "$('input:checkbox[name=whatareu]').eq($val-1).click();"; 
    } 
    echo "}, 1000);"; 
    ?> 

Answer 1

我不知道我的理解你的問題很好，看我的片段。如果你願意，你可以創建一些映射函數setDefaultState(basedOn)，它在checkboxs模型中設置checked。

如果問題是數據在您離開控制器後丟失了，您應該使用像Angular的工廠這樣的單獨存儲，並將檢查的類別存儲在那裏。

angular.module('app', []) 
 

 
.controller('FrameController', ['$injector', 
 
    function($injector) { 
 
    var vm = this; 
 

 
    vm.checkboxs = [{ 
 
     id: 'WAY8', 
 
     label: 'Develop', 
 
     checked: true 
 
    }, { 
 
     id: 'WAY9', 
 
     label: 'Design' 
 
    }] 
 

 
    angular.extend(vm, { 
 
     save: save 
 
    }) 
 

 
    function save() { 
 
     // API call 
 
     console.log('checked: ', vm.checkboxs.filter(function(c) { 
 
     return c.checked 
 
     }).map(function(c) { 
 
     return { 
 
      id: c.id 
 
     } 
 
     })); 
 
    } 
 

 
    } 
 
]); 
 

 
setTimeout(function() { 
 
    angular.bootstrap(document.getElementById('body'), ['app']); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div id="body"> 
 
    <div ng-controller="FrameController as vm"> 
 
    <ul> 
 
     <li ng-repeat="checkbox in vm.checkboxs"> 
 
     <input ng-model="checkbox.checked" type="checkbox" id="{{checkbox.id}}" name="whoareu" /> 
 
     <label for="{{checkbox.id}}">{{checkbox.label}}</label> 
 
     </li> 
 
    </ul> 
 
    <button ng-click="vm.save()"> 
 
     Save 
 
    </button> 
 
    </div> 
 
</div>