양식 필드의 사용자 입력에 대한 링크 숨기기

Question

AngularJS 및 부트 스트랩을 사용하여 SPA를 구축 중입니다. 탐색 모음에 "뒤로"링크가 있고 두 개의 버튼 (저장 및 취소)이있는 양식이 있습니다. 양식이 시작되면 "뒤로"링크 (저장 및 취소를 숨겨야 함) 만 표시하려고합니다. 그러나 사용자가 양식 필드에 값을 입력하기 시작하면 "뒤로"링크를 숨기려고합니다. & 저장 & 취소 버튼이 사용자에게 표시되어야합니다.

내 컨트롤러 로직은 아래와 같이된다 :

app.controller('TestController', function ($scope, $stateParams, testService) { 
    debugger; 
    $scope.id = $stateParams.id; 
    $scope.modeldata = null; 

    testService.getDetails($scope.id).success(function (data) { 
     $scope.modeldata = data; 
     $scope.beforeImage = angular.copy(data); 
    }); 

    $scope.isUnchanged = function(formData){ 
     debugger; 
     return angular.equals(formData, $scope.beforeImage); 
    }; 
....  

난 형태의 현재 상태와 형태의 초기 상태 사이에서 데이터를 검사하는 기능을 갖는다 isUnchanged.

이 부분 템플릿의

초기 출시가 제대로에만 "뒤로"링크를 보여줍니다

<script type="text/ng-template" id="/testDetails.html"> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-left"> 
       <a ui-sref="TestList" class="btn-link btn navbar-btn y-back" ng-show="isUnchanged(modeldata)"> 
        <span class="caret left"></span> 
        Back 
       </a> 
      </div> 
      <div class="navbar-right"> 
       <button ng-click="cancel()" class="btn btn-default navbar-btn" ng-hide="isUnchanged(modeldata)">Cancel</button> 
       <button ng-click="updateTest()" class="btn btn-warning navbar-btn" ng-hide="isUnchanged(modeldata)">Save</button>  
      </div> 
     </div> 
    </div> 
    <form class="form-horizontal" role="form"> 
     <legend>Test Details</legend> 
     <div class="col-sm-12"> 
     <div class="row"> 
      <div class="panel panel-default"> 
      <div class="panel-heading">Basic Data</div> 
      <div class="panel-body"> 
       <div class="col-sm-6"> 
        <div class="form-group"> 
         <label class="col-sm-2 control-label">Id</label> 
         <div class="col-sm-10"> 
         <p class="form-control-static">{{ modeldata.testId }}</p> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-sm-2 control-label" for="testName">Name</label> 
         <div class="col-sm-10"> 
         <input class="form-control" type="text" id="testName" ng-model="modeldata.name" required> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-sm-2 control-label" for="testDescription">Description</label> 
         <div class="col-sm-10"> 
         <input class="form-control" type="text" id="testDescription" ng-model="modeldata.description"> 
         </div> 
        </div>   

..... : 아래 그림과 같이이 기능은 다음 실제 NG 쇼/NG 숨기기 지시어에 사용된다 저장 & 취소 버튼을 숨 깁니다. 그러나 값이 편집 가능한 양식 필드에 입력되면 스위치가 발생하지 않습니다.

어떤 아이디어가 잘못 될 수 있습니까?

Answer 1

myForm.$pristine 또는 myForm.$dirty을 사용할 수 있습니다. $pristine은 사용자가 양식과 상호 작용하지 않았 음을 의미하고 $dirty은 반대입니다.

<a ui-sref="TestList" class="btn-link btn navbar-btn y-back" ng-show="myForm.$pristine"> 
<span class="caret left"></span> 
Back 
</a> 

<button ng-click="cancel()" class="btn btn-default navbar-btn" ng-hide="myForm.$pristine">Cancel</button> 
<button ng-click="updateTest()" class="btn btn-warning navbar-btn" ng-hide="myForm.$pristine">Save</button>  

<form class="form-horizontal" name="myForm" role="form"> 

, BTW 각도 1.3와 함께 당신은 또한 $touched 및 $untouched를 사용할 수 있습니다. $touched은 양식에 포커스가 손실되었음을 의미합니다. 그들은 유효성 검사를 위해 매우 유용합니다.