단추를 클릭 할 때 중첩 된 형식 양식의 상태를 읽기 전용으로 변경하는 방법

Question

내 문제는 간단합니다.

내가 가진 것들.

- 데이터 (JSON)를 사용하여 만든 양식 (형식적)이 백엔드에서 받았습니다.

- 양식이 다중 레벨 중첩 (현재 두 레벨 중첩)됩니다.

- 버튼을 클릭하면 양식에 다른 요소를 추가하는 모든 중첩 된 양식 요소와 연결된 리피터가 있습니다.

- 양식 요소의 상태를 readOnly로 토글하는 버튼이 페이지 상단에 있습니다. 내가

에 직면하고있다

문제 - I 버튼을 클릭하면, 형태 요소의 상태는를 중첩하는 것을 제외하고 readOnly 인, 로 변경합니다.

내가 버튼을 클릭 --When

이, 내 양식의 모든 단일 요소가 읽기 전용으로 상태가 중첩 여부를 변경해야 원하는 것은.

다음은 컨트롤러입니다 ... JS-Bin 링크가 뒤 따른다. 사전

P.S.에서

app.controller('MainCtrl', function MainCtrl(formlyVersion) { 
 
    var vm = this; 
 

 
    vm.onSubmit = onSubmit; 
 
    vm.exampleTitle = 'Nested Repeating Section'; 
 
    vm.options = { 
 
    formState: { 
 
     readOnly: true 
 
    } 
 
    }; 
 

 
    init(); 
 

 
    vm.originalFields = angular.copy(vm.fields); 
 

 

 
    function onSubmit() { 
 
    alert(JSON.stringify(vm.model), null, 2); 
 
    } 
 

 

 
    function init() { 
 
    vm.fields = [{ 
 
     key: 'name', 
 
     type: 'input', 
 

 
     templateOptions: { 
 
     label: 'Name', 
 
     required: true, 
 
     minlength: 5, 
 
     maxlength: 25 
 
     } 
 
    }, { 
 
     key: 'description', 
 
     type: 'textarea', 
 

 
     templateOptions: { 
 
     label: 'Description', 
 
     rows: 5, 
 
     maxlength: 100 
 
     } 
 
    }, { 
 
     wrapper: 'panel', 
 
     templateOptions: { 
 
     label: 'Cars' 
 
     }, 
 
     fieldGroup: [{ 
 
     type: 'repeatSection', 
 
     key: 'cars', 
 
     templateOptions: { 
 
      btnText: '+', 
 
      fields: [{ 
 

 
      wrapper: 'panel', 
 
      templateOptions: { 
 
       label: 'New car' 
 
      }, 
 
      fieldGroup: [{ 
 
       key: 'carname', 
 
       type: 'input', 
 
       templateOptions: { 
 
       label: 'Name', 
 
       required: true, 
 
       maxlength: 25 
 
       } 
 
      }, { 
 
       key: 'cardesc', 
 
       type: 'input', 
 
       templateOptions: { 
 
       label: 'Description', 
 
       maxlength: 50 
 
       } 
 
      }] 
 
      }] 
 
     } 
 
     }] 
 
    }]; 
 
    } 
 
});

http://jsbin.com/sunocaf/edit?html,js,output

감사합니다 - 나는 형식적인 공식 웹 사이트에서 예를 들었다.

Answer 1

I이었다 내 문제를 해결할 수 있습니다. 나는 여전히 버튼을 통해 비활성화 기능을 제어하고있다, 유일한 차이점은 내 양식의 반복 된 섹션에 별도의 컨트롤러를 사용하고 있다는 것입니다.

그런 식으로 반복 된 섹션의 컨트롤러에 데이터 서비스를 사용하여 플래그를 제공하여 전체 양식과 함께 비활성화 할 수 있습니다.

이 작업을 수행하려면 반복 섹션의 래퍼를 약간 조정해야했지만 최종 결과는 내가 원했던 것입니다.

건배.

Answer 2

이렇게하면 입력 값이 readOnly가되고 라디오 버튼이나 체크 상자에는 영향을 미치지 않습니다. 버튼도 중요합니다. 다음 컨트롤러

ng-click="readOnly()" 

:

는에 버튼의 NG 클릭 이벤트를, 당신이 원하는 일을 설정하려면

$scope.readOnly = function() { 
     $(document).ready(function() { 
      $('input').click(function (e) { 
       e.preventDefault(); 
      }); 
     }); 
    }; 

이것은 발생하는 모든 입력을 방지 할 수 있습니다. 버튼을 숨기거나 비활성화해야 할 경우 readOnly 플래그를 true로 설정하고 버튼에서 ng-show 또는 ng-disabled를! model.readOnly로 설정할 수 있습니다. 당신은 당신이 angular.element이 (직선 각도 문서 만점) jQuery를위한 ALIAS에도 불구하고, 대신 jQuery를의 각도 사용하는 척하려면

, 당신은 할 수 :

$scope.readOnly = function() { 
    angular.element(function() { 
      angular.element('input').trigger('click')(function(e) { 
       e.preventDefault(); 
      }; 
     }); 
};