Скрытие ссылки при вводе пользователем в поле формы

Я создаю SPA, используя AngularJS и Bootstrap. У меня есть форма со ссылкой "Назад" на панели навигации и двумя кнопками (Сохранить и Отменить). Когда форма запущена, я хочу отображать только ссылку «Назад» (сохранение и отмена должны быть скрыты). Однако, когда пользователь начинает вводить значения в любое из полей формы, я хочу скрыть ссылку «Назад», а кнопки «Сохранить и отменить» должны отображаться пользователю.

Логика моего контроллера показана ниже:

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>

.....

При первом запуске частичного шаблона корректно отображается только ссылка «Назад» и скрываются кнопки «Сохранить и отменить». Однако при вводе значений в редактируемые поля формы переключения не происходит.

Есть идеи, что может пойти не так?


angularjs angularjs-directive ng-show ng-hide
person mithrandir    schedule 19.10.2014    source источник
comment
Данные модели не меняются, поэтому неизменная функция всегда возвращает true. Я думаю, вы хотите связать данные этой модели с чем-то   -  person dchhetri    schedule 19.10.2014
comment
Извините, я не включил фрагмент большего размера. Я отредактировал приведенный выше код частичного просмотра HTML, чтобы показать использование модели. Есть ли что-то, что нужно установить в самой «форме»?   -  person mithrandir    schedule 19.10.2014
comment
Будет полезно, если вы предоставите пример работающего кода.   -  person Alborz    schedule 19.10.2014
comment
вы можете использовать form.$dirty для отображения/скрытия   -  person harishr    schedule 19.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать 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 означает, что форма потеряла фокус. Они весьма полезны для валидации from.

person s.alem    schedule 19.10.2014
comment
Я попробовал это, однако директива, кажется, работает только тогда, когда частичная загрузка. Таким образом, Back отображается правильно. Однако, когда я ввожу значение в поле формы, кнопка «Сохранить/Отменить» не отображается. - person mithrandir; 20.10.2014
comment
Нет, кнопка «Назад» все еще остается. Я могу предоставить очищенную версию кода в Plunkr. - person mithrandir; 20.10.2014