2017-01-14 1 views
1

27 개의 체크 박스가 있다고 가정 해 봅시다. '카테고리'라고합시다. 이 체크 박스는 한 섹션에 있으며 여러 개를 선택하여 저장할 수 있습니다.각형 - 체크 박스 값을 저장하고 표시 함

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);"; 
    ?> 
+0

무엇 코드는 지금까지해야합니까? 또한 Angular의 어떤 버전을 사용하고 있습니까? –

+0

게시물이 업데이트되어 각도 1이 사용됩니다. :) –

답변

0

나도 몰라 여기

코드입니다 너의 문제는 잘, 내 발언을 참조하십시오. 원한다면 모델 checkboxschecked을 설정하는 매핑 기능 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>

관련 문제