Question

在我的应用程序中更新数据后，我正在尝试显示成功消息。 Success function工作正常，但未生成消息。当我点击save()按钮时，会显示小警告框，但不会显示消息。

HTML：<div class="alert alert-success" ng-show="successmessage">{{cts.success_info}}</div>

Angular Js：

$scope.successmessage = function(){ 
   $scope.cts = [];
   $scope.cts.success_info = "Data Successfully got updated"; 
 }

Answer 1

您将successmessage定义为函数，但将其用作值。如果您需要在save功能成功通话时显示提醒，请使用下面的success功能。它创建一个带有消息和isSuccess标志的对象：

HTML：

<div class="alert alert-success" ng-show="cts.isSuccess">{{ cts.message }}</div>

JS：

$scope.success = function() { 
  $scope.cts = {
    isSuccess: true,
    message: 'Data Successfully got updated'
  }; 
}

Working demo

Answer 2

您可以利用* ng的优势，如果要显示更多，则只需简单的字符串，如下所示：

showMsg: boolean = false;

onSubmit() {
this.userService.createUser(this.addForm.value)
  .subscribe( data => {
    this.router.navigate(['list-user']);
    this.showMsg= true;
  });
}
then you can use showMsg boolean to show/hide dive like below

<div class="col-md-6">
  <div ng-click=="onSubmit()">

   <div class="row"  *ngIf="showMsg">
      <div class="col-xs-12">
         <p class="alert alert-success">
             <strong>Registration Success!</strong> Please click here to login!.

         </p>
      </div>
    </div>

    <button class="btn btn-success">Add user</button>
  </div>
</div>

请注意，我正在使用一些引导程序类进行样式设计。

Answer 3

是功能必须返回一些东西。如果您想要更好的选择，可以使用 toast 或 popover 。

Answer 4

这样做，

<div class="alert alert-success" ng-show='cts.showmsg == true'>{{cts.success_info}}</div>

您可以使用一个布尔变量来显示/隐藏消息。

Angular Js：

$scope.successmessage = function(){ 
   $scope.cts = [];
   $scope.cts.success_info = "Data Successfully got updated";
   $scope.cts.showmsg = true;
 }

Answer 5

如果你想以弹出窗口或模态显示，那么有一个名为ngDialog的角度最好的库

有没有更好的方法来显示成功警报消息

5 个答案: