2017-06-05 4 views
1

Wie zeige ich die Benutzereingabe an, wenn der Benutzer auf die Senden-Schaltfläche klickt. Löschen Sie die Meldung auch, wenn der Benutzer auf die Schaltfläche zum Löschen klickt. (Bitte & danke)Wie zeige ich die Benutzereingabe an, wenn der Benutzer auf die Senden-Schaltfläche klickt. Löschen Sie die Meldung auch, wenn der Benutzer auf die Schaltfläche zum Löschen klickt. (Angularjs)

<html> 

<head> 
    <title></title> 

    angular.module('exampleModule', []) 

    .controller('messageController', ['$scope', function($scope) { 

     $scope.message = ''; 

    }]) 
    </script> 
</head> 

<body ng-app="exampleModule"> 

    <div ng-controller="messageController"> 

    Input: 
    <input ng-model="message" /> 

    <button>Submit</button> 

    <button>Clear</button> 

    <br/> 
    <div>Message: {{message}}</div> 
    </div> 
</body> 

</html> 
+0

Haben Sie es lösen? – Anokrize

+0

Ja, danke für die Hilfe! @Anokrize –

+0

Froh, dass es funktioniert :) – Anokrize

Antwort

1

Geben Sie Ihre Tasten ein ng-Ereignis klicken und das Ereignis in Ihrem Controller zu behandeln. Wenn der Submit-Button gedrückt wird, setzen Sie die Show-Anzeige auf true, so dass sie angezeigt wird.

HTML:

<div ng-app="exampleModule"> 
    <div ng-controller="messageController"> 

     Input: 
     <input ng-model="message" /> 

     <button ng-click="display()">Submit</button> 

     <button ng-click="clear()">Clear</button> 

     <br/> 
     <div ng-show="show">Message: {{message}}</div> 
    </div> 
</div> 

AngularJS Controller:

angular.module('exampleModule', []) 
.controller('messageController', ['$scope', function($scope) { 
    $scope.show = false; 
    $scope.message = ''; 

    $scope.clear = function() { 
     $scope.message = ''; 
    }; 

    $scope.display = function() { 
     $scope.show = true; 
    }; 
}]) 

JSFiddle: https://jsfiddle.net/Anokrize/2fvtbwd2/

Verwandte Themen