Question

我正在使用AngularJS和Bootstrap构建SPA。我的表格有一个＆＃34; Back＆＃34;导航栏上的链接和2个按钮（保存并取消）。当表单启动时，我想只显示＆＃34; Back＆＃34;链接（应隐藏保存和取消）。但是，当用户开始在任何表单字段中输入值时，我想要隐藏＆＃34;返回＆＃34;链接＆amp;拯救与放大应向用户显示取消按钮。

我的控制器逻辑如下所示：

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

.....

部分模板的初始启动只能正确显示＆＃34; Back＆＃34;链接并隐藏Save＆amp;取消按钮。但是，当值输入到可编辑的表单字段时，切换不会发生。

关于可能出现什么问题的任何想法？

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

顺便说一下，使用Angular 1.3，您还可以使用$touched和$untouched。 $touched表示形式失去了焦点。它们对于验证非常有用。

在表单字段上隐藏用户输入的链接

1 个答案: