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 では と も使用でき$touchedます$untouched。 $touchedフォームがフォーカスを失ったことを意味します。それらは検証から非常に便利です。

于 2014-10-19T22:24:29.043 に答える