AngularJS über ng Zustand-wenn Karte SPEICHERN und AKTUALISIEREN-BUTTON

<form novalidate>
    <label>Name</label> 
        <input type="text" name="name" ng-model="newcontact.name" required/>
    <label>Email</label> 
        <input type="text" name="email" ng-model="newcontact.email" required/>
    <label>Phone</label> 
        <input type="text" name="phone" ng-model="newcontact.phone" required/>
        <br/>
        <input type="hidden" ng-model="newcontact.id" />

     <input type="button" ng-if="newcontact.id" value="UPDATE" ng-click="saveContact()" />
     <input type="button" ng-if="!newcontact.id" value="SAVE" ng-click="updateContact()" />
    </form>

Betrachten Sie das obige Formular, In das erstellen/Bearbeiten wird mit der gleichen Vorlage, So dass ich gerne zeigen
Die Namen von Schaltflächen wie "AKTUALISIEREN" oder "SPEICHERN", basierend auf newcontact.id-Wert.

Müssen sich nur auf diese :

<input type="button" ng-if="newcontact.id" value="UPDATE" ng-click="saveContact()" />
         <input type="button" ng-if="!newcontact.id" value="SAVE" ng-click="updateContact()" />

Da die Winkel nicht über ng-else, so wie Sie diese erreichen.

Müssen auch wissen.
2. wie Sie die Sicherheit von business-Logik vom user-in AngularJS

  • Es sei denn, ich bin fehlt die Hand, was Sie für mich gut aussieht.
InformationsquelleAutor RONE | 2014-03-04
  1. 4

    Gut,

    können Sie nur nutzen ng-show hier, durch die Verwendung von ein-button statt:

    <button ng-click="save()">
  <span ng-show="newcontact.id">Update</span>
  <span ng-show="!newcontact.id">Save</span>
</button>

    mit einer save-Funktion, reagiert auf den Zustand der newcontact.id:

    angular.module('my.module').controller(['$scope', function($scope) {
  $scope.save = function() {
     if(typeof scope.newcontact.id === 'undefined') {
       //save
     } else {
       //update
     }
  }
}]);

    EDIT: eine Andere Möglichkeit könnte sein, sich nicht zu entscheiden, wenn, ob oder nicht es einen neuen Kontakt:

    angular.module('my.module').controller(['$scope', function($scope) {
   $scope.newcontact = {};
   $scope.save = function() {
     /** Your save function */
   }
   //with a set contact, this will now always evaluate to 'Save'
   $scope.label = !!scope.newcontact.id ? 'Update' : 'Save';

   //so we go for something different:
   $scope.$watch('newcontact', function(newValue) {
     //this watches the newcontact for a change, 'newValue' is the new state of the scope property
     $scope.label = !!newValue.id ? 'Update' : 'Save';
   });
}]);

    Hinweis: Das ist nur ein grobes Beispiel, sollten Sie wahrscheinlich verwenden einen Dienst in Verbindung mit einer API zu speichern Ihre Benutzer. was zum Beispiel tut, ist im Grunde gerade ein Bereichs-Eigenschaft, und ändern Sie die Beschriftung entsprechend. Sehen hier für eine detailliertere Beschreibung.

    und verwenden Sie dann in der form:

    <button ng-click="save()">{{label}}</button>

    EDIT 2: um Ihre Frage Zu beantworten über das ausblenden von business-Logik vom user - Sie kann einfach nicht. AngularJS ist ein JavaScript-Framework, und geben Sie eine Benutzer-browser den vollständigen code, um Ihre Anwendung auszuführen. Wenn Sie wirklich sensible Logik, legen Sie es auf der server-Seite und setzen Sie eine Schnittstelle (z.B. über die JSON-API).

    • +1 für die zweite Lösung, denn das gab mir eine Idee, wie getan werden kann, Ihre $Umfang.label = !!Umfang.newcontact.id ? 'Update' : 'Speichern'; wird nicht funktionieren, sagt newcontact undefined,
    • das ist, was die /** ... */ war. Grundsätzlich können Sie entweder initialisieren der newcontact Objekt, wenn es nicht vorhanden ist oder nicht vorfüll es, wenn es vorhanden ist: $scope.newcontact = {}; gib mir eine minute, ich habe es im code-Beispiel.
    InformationsquelleAutor Florian
Schreibe einen Kommentar