0

我正在使用 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-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>

......

部分模板的初始启动正确地仅显示“返回”链接并隐藏“保存和取消”按钮。但是，当将值输入到可编辑的表单字段中时，不会发生切换。

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

4

1 回答 1

0

您可以使用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，您还可以使用$touchedand $untouched. $touched意味着形式失去了焦点。它们对于验证非常有用。

于 2014-10-19T22:24:29.043 回答