동적양식명속성동적양식명속성동적양식명속성Angularjs Angularjs Angularjs

동적양식명속성Angularjs

폼Name.inputName을(를) 어떻게 사용할까요?$inputName이 동적으로 생성되었을 때 유효합니까?

  <form name="formName">
    <input ng-repeat="(variable) in variables"
           type="text" name="variable.name"
           ng-model="variable.name" required />
 </form>

HTML 입력 속성 'name'의 출력은 모든 반복 입력에 적용되는 문자열 "variable name"이 될 것입니다.

이거 한번 해봤으면.

<form name="formName">
  <input ng-repeat="(variable) in variables"
         type="text" name="{{ variable.name }}"
         ng-model="variable.name" required />
</form>

HTML 입력 특성 'name'의 출력은 모든 반복 입력에 적용되는 문자열 "{ variable.name }}"이 됩니다.

이 두 조건 중 하나에서는 반복되는 각 입력 요소에 대한 이름 속성이 동적으로 생성되지 않으며, 모든 입력이 동일한 입력 이름을 공유합니다.특정 이름을 기준으로 특정 입력을 호출하려면 별로 좋지 않습니다.

• 동적 이름 값을 사용해야 합니다.
• $scope를 호출할 수 있어야 합니다.formName.dynamicName.달러
• $scope를 호출할 수 있어야 합니다.양식Name.달러
• 중첩 양식 또는 마스터 양식에 동적 이름 입력 필드를 추가해야 합니다.

Angular 1.3이 이것을 고친 것 같습니다 (https://stackoverflow.com/a/32907176/3854385)

이제 Angular 1.3+로 가능합니다.

<form name="vm.myForm" novalidate>
  <div ng-repeat="p in vm.persons">
    <input type="text" name="person_{{$index}}" ng-model="p" required>
    <span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
  </div>
</form>

데모

어떤 경우에는 정보를 전달할 수 있다면 내부 양식이 좋은 해결책입니다. (https://stackoverflow.com/posts/12044600/) '동적 이름' 문제를 해결하려면 내부 양식(seng-form)을 만들어야 합니다.

<div ng-repeat="social in formData.socials">
      <ng-form name="urlForm">
            <input type="url" name="socialUrl" ng-model="social.url">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
            <button ng-click="doSomething(urlForm.socialUrl.$valid)">Test</button>
      </ng-form>
  </div>

다른 대안은 이에 대한 사용자 정의 지침을 작성하는 것입니다.

다음은 ngForm: http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/ 의 사용법을 보여주는 jsFiddle입니다.

저는 이러한 요구의 일부 또는 전부를 만족시키는 답을 찾을 수 없었습니다.이것이 제가 생각해낸 것입니다.

더 좋은 방법이 있을지도 모르니 생각을 공유해 주시기 바랍니다.
8 Angularjs 1.3.0-베타.8을 사용하고 있습니다.

입력, 선택 등을 모두 포함하는 다중 네스트 지시어가 포함된 양식이 있습니다.이러한 요소는 모두 ng-반복 및 동적 문자열 값으로 둘러싸여 있습니다.

이 지침을 사용하는 방법은 다음과 같습니다.

<form name="myFormName">
  <nested directives of many levels>
    ex: <input ng-repeat=(index, variable) in variables" type="text"
               my-name="{{ variable.name + '/' + 'myFormName' }}"
               ng-model="variable.name" required />
    ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
                my-name="{{ variable.name + '/' + 'myFormName' }}"
        </select>
</form>

참고: 입력 테이블을 직렬화해야 할 경우 문자열 연결에 추가하고 색인화할 수 있습니다.그러나 동적 이름 입력은 양식 입력의 이름을 모를 수 있으므로 $scope을 어떻게 부르겠습니까?formName.??????? $범위를 반복할 수 있습니다.특정 값과 일치하는 키를 가져오려면 formName 개체를 선택합니다.이는 다음과 같은 문자열 연결을 의미합니다.

my-name="{{ dynamicString + hello + '/' + 'myFormName' }}"

그런 다음 $scope.myFormName에서 개체 위를 반복하고 'hello'가 포함된 키를 수집하면 양식 입력 이름을 찾을 수 있습니다.

app.directive('myName', function(){

  var myNameError = "myName directive error: "

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: 'ngModel', // ngModelController.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return } // no ngModel exists for this element

      // check myName input for proper formatting ex. something/something
      checkInputFormat(attrs);

      var inputName = attrs.myName.match('^\\w+').pop(); // match upto '/'
      assignInputNameToInputModel(inputName, ngModel);

      var formName = attrs.myName.match('\\w+$').pop(); // match after '/'
      findForm(formName, ngModel, scope);
    } // end link
  } // end return

  function checkInputFormat(attrs){
    if( !/\w\/\w/.test(attrs.rsName )){
      throw myNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName
    }
  }

  function assignInputNameToInputModel(inputName, ngModel){
    ngModel.$name = inputName
  }

  function addInputNameToForm(formName, ngModel, scope){
    scope[formName][ngModel.$name] = ngModel; return
  }

  function findForm(formName, ngModel, scope){
    if( !scope ){ // ran out of scope before finding scope[formName]
      throw myNameError + "<Form> element named " + formName + " could not be found."
    }

    if( formName in scope){ // found scope[formName]
      addInputNameToForm(formName, ngModel, scope)
      return
    }
    findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes
  }
});

이렇게 하면 양식이 어디에 있을지 모르는 많은 상황을 처리할 수 있습니다.또는 중첩 양식이 있을 수도 있지만, 어떤 이유로 이 입력 이름을 두 양식 위로 첨부하시겠습니까?그럼, 입력한 이름을 첨부할 양식 이름만 전달해주세요.

제가 원했던 것은 제가 결코 알 수 없는 입력에 동적 값을 할당한 다음 $scope.myFormName이라고 부르는 방법이었습니다.달러 valid.

이는 오버킬(overkill)일 수 있으며, 1.3+에는 더 나은 솔루션이 있습니다.제가 찾은 시간에는 찾을 수가 없었습니다.지금은 이 정도면 돼요.

행운을 빕니다.누군가에게 도움이 되길 바랍니다!!!!

각 1.2.7로 저를 위해 일합니다.

지시:

var DynamicName = function() {
    return {
        restrict: 'A',
        priority: -1,
        require: ['ngModel'],
        link: function (scope, element, attr, ngModel) {
            ngModel[0].$name = attr.name;
        }
    };
};

app.directive('dynamicName', DynamicName);

사용 방법:

<div ng-repeat="phone in hrModel.phones">
    <input type="text"
           name="phones[{{$index}}]"
           ng-model="phones[$index]"
           dynamic-name
    />
</div>

문자열 인덱스가 있는 배열 표기법을 사용하여 자바스크립트 객체에 접근할 수 있다는 것을 잊지 마십시오.다음과 같은 임의 양식 정의 개체가 지정되어 있습니다.

$scope.form_def = {
  form_name : 'BallForm',
  variables : [
    height : { name : 'Height', type : 'text' },
    width : { name : 'Width', type : 'text' },
    color : { name : 'Color', type : 'multi', options : ['red', 'green', 'blue'] }
  ]
};
$scope.form_values = {};

... html 스니펫...

<form name="{{ form_def.form_name }}">
  <div ng-repeat="variable in form_def.variables">
    <input ng-if="variable.type==='text'" type="text" name="{{ variable.name }}" ng-model="form_values[variable.name]">
    <select ng-if="variable.type==='multi'" name="{{ variable.name }}" ng-model="form_values[variable.name]">
      <option ng-repeat="opt in variable.options" value="{{ opt }}">{{ opt }}</option>
    </select>
  </div>
</form>

그러면 컨트롤러 안에 있는 모든 필드에 대해 form_def.variables 해시의 키를 반복하여 액세스할 수 있는 좋은 form_values 개체가 있습니다.

일단 이런 종류의 일반적인 양식 처리 스크립트를 작성하기 시작하면 훨씬 더 많은 것이 관련되어 있습니다. 제 생각에 당신은 엄청난 수의 스파게티 코드를 갖게 되고 아마 덜 일반적인 해결책을 사용하는 것이 더 나을 것입니다. 하지만 그것은 또 다른 SO 질문입니다.

언급URL : https://stackoverflow.com/questions/27071413/dynamic-form-name-attribute-input-type-text-name-variable-name-in