각형 get 양식 요소

함수에 전달 된 양식에서 요소 이름과 클래스를 가져 오려고합니다. 내가 어떻게 할 수 있니?각형 get 양식 요소

HTML 쪽.

<form name="test"> 
    <div> 
     <input type="text" class="test1" name="test2"/> 
    </div> 
    <div> 
     <input type="text" class="test3" name="test4"/> 
    </div> 
    </form> 
    <div> 
     <input type="button" data-ng-click="save(test)" /> 
    </div>

자바 스크립트 측면

$scope.save = function(form){ 
    for(how many elements are there) 
     (get elements values) 
}

I, 그것은 심지어 그렇게 할 수 있다고 할 수 있습니까? 내 목적은 필요할 때 클래스와 다른 속성을 변경하는 것입니다.

출처

2013-07-09 Kapaacius

참조 [이 게시물을 (http://stackoverflow.com/q/15877212/2013981) – rGil

저는 AngularJS에 비해 비교적 새로운데, 제 지식을 테스트하고 잘하면 도움을 줄 수있는 확실한 시도를하려고합니다.

양식에서 각 요소에 대해 ng 모델을 사용해야합니다. 예를 들어 다음은 사용자 이름과 성을 수집하는 양식입니다.

<form name="test"> 
<div> 
    <input type="text" class="test1" name="test2" data-ng-model="user.name/> 
</div> 
<div> 
    <input type="text" class="test3" name="test4" data-ng-model="user.last/> 
</div> 
</form> 
<div> 
    <input type="button" data-ng-click="save(test)" /> 
</div>

이렇게하면 $ scope.user를 통해 양식의 데이터에 액세스 할 수 있습니다.

이제 클래스와 속성을 변경하기 위해 양식에서 클래스/속성 변경을 결정하는 규칙이 무엇인지 모르겠지만 ng-dirty 클래스를 '플래그'로 사용하여 사용자가 변화. 여기 정확히 무엇을 성취하려고하는지에 대한 정보가 도움이 될 것입니다.

출처

2013-07-09 12:57:12 Anthony

오류를 표시하기 위해 클래스 필드를 변경해야합니다. 저장 버튼을 누른 후 입력 필드를 통해 반복하고 모든 잘못된 필드를 표시 할 수 있기를 바랍니다. 지금은 IF를 사용하여이를 수행했지만 루프를 통해이를 수행하려고합니다. – Kapaacius

@Kapaacius Angular가 작성한 폼 유효성 검사를하고있는 것 같습니다. http://docs.angularjs.org/guide/forms. 조금 복잡하지만 모든 부분이 있습니다. –

angular.js에서 보았던 공통적 인 조언은 지시어에서 DOM 조작 만하면됩니다. 따라서 Anthony의 답변 즉 ng-model을 사용하여 확실히 수행해야합니다.

지시어를 사용하여보다 적절하게 수행하는 방법을 보려면 아래로 이동하십시오. 당신이 컨트롤러에서 그 일을 주장하는 경우

하지만, 여기 당신이 그것을 접근하는 방법을 보여줍니다 jsfidle은 다음과 같습니다

http://jsfiddle.net/3BBbc/2/

HTML :

<body ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
     <form id="test"> 
      <div> 
       <input type="text" class="test1" name="test2" /> 
      </div> 
      <div> 
       <input type="text" class="test3" name="test4" /> 
      </div> 
     </form> 
     <div> 
      <input type="button" ng-click="save('test')" value="submit" /> 
     </div> 
    </div> 
</body>

자바 스크립트 :

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.save = function (formId) { 
     $('#' + formId).find('input').each(function (idx, input) { 
      // Do your DOM manipulation here 
      console.log($(input).val()); 
     }); 
    }; 
}

그리고 어떻게 할지를 보여주는 jsfiddle이 있습니다. 그것은 지시어와 함께. 그것은 ...하지만 좀 더 복잡 :

http://jsfiddle.net/3BBbc/5/

출처

2013-07-09 15:34:22 yanhan

항상 ** 스코프를 통과 할 수 있습니다. ** 입력란을 알아 내기위한 입력란 – Kirstein

당신은 그 name 즉 $scope.test를 사용하여 $scope에서 직접 양식을 이용 할 수 있으며, 형태, 예를 들어,의 요소 $scope.test.test2. 그러나

, 당신은 같은 것을 할 수있는 개인의 이름을 몰라도 요소를 통해 루프를 원하는 경우 :

angular.forEach($scope.test, function (element, name) { 
    if (!name.startsWith('$')) { 
     // element is a form element! 
    } 
});

출처

2016-03-17 23:54:36

'if (! name.startsWith ('$') {'는 조건을 닫는'if (! name.startsWith ('$') {{('missing ')'을 읽어야합니다. – notacouch

업데이트 됨. 감사. –

내가이 양식에서 요소 이름과 클래스를 얻기 위해 노력하고 있어요을 함수로 넘어갔습니다. 내가 어떻게 할 수 있니?

귀하의 의사는 바른 길에 있습니다 :

$scope.save = function(formName) { 
    angular.forEach($scope[ formName ], function(field, fieldName) { 

     // Ignore Angular properties; we only want form fields 
     if(fieldName[ 0 ] === '$') { 
      return; 
     } 

     // "fieldName" contains the name of the field 

     // Get the value 
     var fieldValue = field.$viewValue; 
    }); 
}

내 목적은 필요할 때 클래스와 몇 가지 다른 속성을 변경하는 것입니다.

그렇게하려면 각 요소 래퍼, 필드 요소를 얻을 수 있습니다 :

// Get the field element, as an Angular element 
var fieldElement = angular.element(document.querySelector('[name="' + fieldName + '"]'));

그런 다음 이들 요소에 다양한 jqLite 방법을 사용할 수 있습니다. 예를 들어, 요소의 클래스 (기존의 클래스를 덮어 쓰기)를 설정하려면 ATTR 방법을 사용할 수 있습니다

// Replace existing class with "new-class" 
fieldElement.attr('class', 'new-class');

출처

2016-04-21 18:15:52

각형 get 양식 요소

답변

관련 문제