javascript - ejemplos - AngularJS: modal enlazado a datos: guarde los cambios solo cuando se haga clic en "Guardar", u olvide los cambios si se hace clic en "Cancelar"

angularjs tutorial

Question

Tengo una lista de elementos, y al hacer clic en uno de los elementos, se muestra un diálogo modal para que el usuario realice algunos cambios y haga clic en "Cerrar" o "Guardar cambios".

El problema es que el usuario realiza algunos cambios y hace clic en "Cerrar", los cambios se habrían reflejado en el modelo al que está vinculada la vista, ya que el enlace de datos es instantáneo.

Mi pregunta es entonces, ¿cómo diferir las actualizaciones y realizar solo el enlace cuando se hace clic en "Guardar cambios", u olvidar de alguna manera los cambios si se hace clic en "Cancelar".

El código para mi diálogo modal es así:

<div ui-modal class="fade static" ng-model="modalShown" id="myModal" data-backdrop="static">
        <div class="modal-header">
            <button type="button" class="close" ng-click="closeModal()" aria-hidden="true">&times;</button>
            <h3>{{selectedClientFeature.feature.type}}</h3>
        </div>
        <div class="modal-body">    
            <ul class="unstyled columnlist">
                <li ng-repeat="country in countriesForEdit">
                    <input type="checkbox" ng-model="country.selected"> {{country.name}}
                </li>
            </ul>
        </div>
        <div class="modal-footer">
            <a ng-click="closeModal()" class="btn">Close</a>
            <a ng-click="saveChanges()" class="btn btn-primary">Save changes</a>
        </div>
    </div>

Gracias shaun

Answer 1

Los documentos de angularjs suelen tener un ejemplo de esta situación. Lo que necesitaría es clonar su modelo (ver angular.copy ), antes de mostrar su edición modal, y cuando un usuario haga clic en cerrarModal (), reasignará su modelo al valor clonado. En mi humilde opinión, cambiaría el nombre de su botón ''Cerrar'' a ''Cancelar'' y lo pondría a la derecha de ''Guardar cambios'', esto es más explícito y parece ser la forma en que funcionan muchos sitios.

Espero que esto ayude

--dan

Answer 2

Para automatizar el modelo de clonación / actualización manual, se me ocurrió una directiva de lazy-model .
Consulte https://.com/a/20643001/740245