在Angular JS中单击一下即可显示消息和刷新页面

时间:2015-08-26 05:21:51

标签: html angularjs

我希望在显示消息或提示“#34;成功"或相反亦然。我该如何实施呢?

我尝试刷新代码,但之后没有显示消息。

HTML CODE:

<div class="row" ng-controller="PublishManifestCtrl">
<div class="col-xs-12 col-md-12">
    <div class="widget">
        <div class="widget-header bordered-bottom bordered-themeprimary">
            <i class="widget-icon fa fa-tasks themeprimary"></i>
            <span class="widget-caption themeprimary">Manifest Status</span>
        </div>
        <div class="widget-body">
            <form class="form-bordered" role="form">
                <div class="form-group">
                    <label style="padding-left: 8px;">Manifest was last published to agents on <b>{{manifeststatus.manifestLastPublishedDate}}</b>.</label>
                </div>
                <div class="form-group">
                    <label style="padding-left: 8px;">Manifest was last updated by <b> {{manifeststatus.lastUpdatedByUser}} </b> on <b>{{manifeststatus.manifestLastedUpdatedDate}}</b>.</label>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1">
                        <button id="PublishButton" class="btn btn-default shiny " ng-disabled="manifeststatus.enablePublishButton" ng-click="Save(manifeststatus)">Publish</button>
                    </div>
                    <br/>
                    <div id="statusDivPublish" ng-show="showstatus">
                        <alert type="{{alert.type}}">{{alert.msg}}</alert>
                    </div>
                </div>
            </form>
        </div>

    JS代码:

app.controller('PublishManifestCtrl', function ($scope, $rootScope, $http) {

$scope.showstatus = false;

$http({
    url: $rootScope.WebApiURL + '/getmanifeststatus',
    method:get(),
    params: { 'foobar': new Date().getTime() }
}).
success(function (data, status, headers, config) {
    var options = { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric" };

    data.manifestLastedUpdatedDate = (new Date(data.lastUpdatedDateTime)).toLocaleDateString('en-US', options);
    data.manifestLastPublishedDate = (new Date(data.lastPublishDateTime)).toLocaleDateString('en-US', options);
    var date1 = new Date(data.lastUpdatedDateTime);
    var date2 = new Date(data.lastPublishDateTime);
    data.enablePublishButton = date2.getTime() > date1.getTime();

    $scope.manifeststatus = data;
}).
error(function (data, status, headers, config) {
    alert('error' + status);
    // log error
}); 
$scope.Save = function (data) {
    debugger;
    $http.post($rootScope.WebApiURL + '/updatemanifeststatus');
    //refresh
     $state.transitionTo($state.current, $stateParams, {
     reload: true,
    inherit: false,
   notify: true
    });
    $scope.showstatus = true;
    $scope.alert = { type: 'success', msg: 'Published Successfully.' };
    $(".statusDivPublish").show();
)});

实施

$scope.Save = function (data) {
      // debugger;
        $http.post($rootScope.WebApiURL + '/updatemanifeststatus');
       //made change
        $scope.manifeststatus = data;
        $scope.showstatus = true;
        $scope.alert = { type: 'success', msg: 'Published Successfully.' };
        $(".statusDivPublish").show();


        //refresh
        $state.transitionTo($state.current, $stateParams, {
            reload: true,
            inherit: false,
            notify: true
        });

    }   
  });

enter image description here

最初它应该是这样的: enter image description here

1 个答案:

答案 0 :(得分:2)

你的HTML中的

<div>{{date}}</div>
我们的angularjs文件中的

$scope.Save = function (data) {

$http.post($rootScope.WebApiURL + '/updatemanifeststatus');

$scope.date = data.date;

//refresh
$scope.showstatus = true;
$scope.alert = { type: 'success', msg: 'Published Successfully.' };
$(".statusDivPublish").show();
$(".statusDivPublish").remove();

)});