Angular와 함께 확인란 사용JS

Angular와 함께 확인란 사용JS

html5를 사용하려고 했습니다.required체크박스의 그룹 속성입니다만, ng-form을 사용해 실장하는 좋은 방법을 찾을 수 없습니다.

체크 박스를 온으로 하면, 그 입력 요소의 값을 값의 배열에 푸시 합니다.

각도 필수 검증기는 입력 요소와 관련된 ng-model을 감시하는 것 같습니다만, 같은 모델에 여러 개의 체크박스를 연결하여 입력 필드의 값으로 값을 업데이트하려면 어떻게 해야 합니까?

현재 구현은 이 바이올린과 같습니다.

<div ng-controller="myCtrl">
  <ng-form name="myForm">
    <span ng-repeat="choice in choices">
      <label class="checkbox" for="{{choice.id}}">
        <input type="checkbox" required="required" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" />
        {{choice.label}}
      </label>
    </span>
    <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
  </ng-form>
</div>​

updateQuestionValue 함수는 값 배열에서 추가 또는 삭제를 처리하지만 각 체크박스는 자체 모델을 가지고 있기 때문에 폼을 유효하게 하기 위해 각 체크박스를 켜야 합니다.

여러 개의 라디오 버튼에서 작동하도록 했습니다만, 한 개만 선택할 수 있기 때문에 모두 같은 모델에서 작동합니다.

선택사항이 선택되지 않은 경우 [Submit]버튼을 디세블로 하는 경우 가장 쉬운 방법은 필수 속성을 설정하지 않고 ng-disabled 속성 내의 어레이 길이를 확인하는 것입니다.

<input type="submit" value="Send" ng-click="submitSurvey(survey)" 
 ng-disabled="value.length==0" />

업데이트된 바이올린은 여기를 참조하십시오.

또 다른 방법은 체크박스의 ng-required 속성에서 어레이 길이를 체크하는 것입니다.

<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)"
  ng-model="choice.checked" name="group-one" id="{{choice.id}}" 
  ng-required="value.length==0" />

세컨드 바이올린

몇 가지 사항:

• 이 경우 코드를 조금 심플하게 하기 위해 어레이 전체를 갱신하는 접근방식을 채택합니다.($scope.value 어레이 콘텐츠로 스테이트풀한 작업을 하고 있는 경우는 이 작업을 하고 싶지 않을 수 있지만 실제로는 그렇게 보이지 않습니다).
• 그냥 사용하시면 됩니다.<form>보다는<ng-form>.
• 송신 기능을 버튼에서 떼어내다ng-click폼에 넣을 수 있습니다.ng-submit이것에 의해, Angular의 빌트인 검증에 의해서 검증 관리가 조금 쉬워집니다(그 점에 유의하고 있는 경우).
• 만약 당신이<label>포장하다<input>필요 없다for=""기여하다.

여기 업데이트된 바이올린이 있습니다.

코드는 다음과 같습니다.

<div ng-controller="myCtrl">
    <form name="myForm" ng-submit="submitSurvey(survey)">
        <span ng-repeat="choice in choices">
            <label class="checkbox">
            <input type="checkbox" required="required" value="{{choice.id}}" ng-change="updateQuestionValues()" ng-model="choice.checked" name="group-one" />
                {{choice.label}}
            </label>
        </span>
        <input type="submit" value="Send" ng-disabled="myForm.$invalid" />
    </form>
    {{value}}
</div>​

JS

function myCtrl($scope) {

    $scope.choices = [{
        "id": 1,
        "value": "1",
        "label": "Good"},
    {
        "id": 2,
        "value": "2",
        "label": "Ok"},
    {
        "id": 3,
        "value": "3",
        "label": "Bad"}];

    $scope.value = [];

    $scope.updateQuestionValues = function() {
        $scope.value = _.filter($scope.choices, function(c) {
            return c.checked;
        });
    };
}​

라디오 버튼에 ng-model과 같은 ng-model을 사용하여 숨겨진 입력을 추가했습니다.

 <div class="radio" ng-repeat="option in item.AnswerChoices | orderBy: DisplayOrder">
        <input type="radio" ng-model="item.Answer" name="mulchoice" value="{{option.DisplayName}}" />
        <span>{{option.DisplayName}}</span>
    <input type="hidden" ng-model="item.Answer" name="hiddenradiobuttoninput" required/>
 </div>

체크박스를 어레이 모델로서

<input type="checkbox" ng-model="value[$index]" value="{{choice.id}}/>

바이올린: http://jsfiddle.net/thbkA/1/

<ul  class="list-group">
  <li ng-repeat='animal in animals' class="list-group-item">
    <label>
      <input type="checkbox"
        ng-model="xyx"
        ng-click="toggleAnimal(animal)"
        ng-checked="selectedAnimals.indexOf(animal) > -1"
        ng-required="selectedAnimals.length == 0" /> 
        {{animal}}</label>
  </li>                  
</ul>

$scope.toggleAnimal = function(animal){
    var index = $scope.selectedAnimals.indexOf(animal);
    if(index == -1) {
      $scope.selectedAnimals.push(animal);
    }
    else{
      $scope.selectedAnimals.splice(index, 1);
    }
}

자세한 내용은 데모 및 기타 관련 예를 참조하십시오.

언급URL : https://stackoverflow.com/questions/13567235/using-checkboxes-and-required-with-angularjs