角型チェックボックスの値を格納して表示する

Question

27個のチェックボックスがあり、それらを「カテゴリ」としましょう。これらのチェックボックスは1つのセクションにあり、それらを複数選択して保存することができます。

eseence：フォームを保存すると、カテゴリが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

私は理解している場合、私は知りませんあなたの問題はよく、私のスニペットを見てください。必要に応じて、モデルcheckboxsにcheckedと設定したマッピング関数setDefaultState(basedOn)を作成することができます。

コントローラを離した後にデータが失われるという問題がある場合は、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>