隱藏表單字段上的用戶輸入鏈接

Question

我正在使用AngularJS和Bootstrap構建SPA。我有一個表單，導航欄上有一個「返回」鏈接和2個按鈕（保存和取消）。當表單啓動時，我只想顯示「返回」鏈接（保存並取消應該隱藏）。但是，當用戶開始向任何表單域輸入值時，我想隱藏「返回」鏈接&保存&取消按鈕應顯示給用戶。

我的控制器邏輯，如下所示：

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功能。該函數然後在實際NG-顯示/ NG-hide指令使用，如下圖所示：

<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>   

.....

首次推出的部分模板正確只顯示「返回」鏈接並隱藏保存按鈕。但是，當值被輸入到可編輯的表單域時，交換機不會發生。

任何有關可能出錯的想法？

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"> 

順便說一句，與角1.3還可以使用$touched和$untouched。 $touched表示表格已失去焦點。它們對驗證非常有用。