Question

我正在使用AngularJs。我有2个div控件，根据条件显示和隐藏。第一个div包含各种输入控件和提交按钮。填写表单并单击提交按钮后，我显示第二个div并隐藏第一个div。第二个div包含来自第一个div的已保存数据的表格视图。 Api是在C＃中创建的，数据是在SQL 2012中保存的。问题是，在单击提交按钮后，会显示第二个div，但它不会绑定当前保存的数据。当我进行手动刷新或单击“仪表板”菜单时，新保存的数据将添加到页面中。以下是使用的代码：

Index.cshtml

<div ng-controller="testController" ng-init="init()">
        <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="" style="min-height:100px;">
            <div>              
                <header>
                    <nav class="navbar navbar-default">
                        <div class="container">
                            <div class="navbar-header">
                                <a class="navbar-brand">Create</a>
                            </div>
                            <ul class="nav navbar-right nav-pills">
                                <li ng-class="{active: createMenu}"
                    <a  href="" ng-click="show('createMenu')">Create</a></li>
                                <li ng-class="{active: dashboardMenu}">
                                    <a href="" ng-click="show('dashboardMenu')">Dashboard</a>
                                </li>
                            </ul>    
                        </div>
                    </nav>
                </header>
            </div>
            <div class="container" ng-show="createMenu">
                <br />
                 <div class="row">
                    <div class="col-sm-2">
                        <label>Name:</label><em style="color:red">*</em>
                    </div>
                    <div class="col-md-6 form-group">
                        <input type="text" required="" ng-model="testName" name="testName" />
                    </div>
                    <span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
                </div>
 <input type="submit" value="Submit" ng-click="submitted=true"  /> 
</div>

  <div ng-show="dashboardMenu">
                <table class="table table-striped table-hover" id="tbSavedData">
                    <thead>
                        <tr>
                        <tr>
                            <th ng-click="sort('ID')">
                                Id
                                <span class="glyphicon sort-icon" ng-show="sortKey=='ID'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                            </th>
                            <th ng-click="sort('testName')">
                                Name
                                <span class="glyphicon sort-icon" ng-show="sortKey=='testName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                            </th>
        </th>
                        </tr>
                    </thead>
                    <tbody>
  <tr dir-paginate="testSummary in dashboard|orderBy:sortKey:reverse|filter:search|itemsPerPage:10" pagination-id="dashboardPagination">
                            <td>{{testSummary.ID}}</td>
                            <td>{{testSummary.testName}}</td>
      </tr>
                    </tbody>
                </table>
</div>

在controller.js中：

$scope.add = function () {
        if (!$scope.mainForm.$valid) {
            alert("Form is not valid")
        }
        else {
            $scope.init();
            $scope.adddetails();
        }
    };

 $scope.adddetails = function() {       
        var datasave = {
            Id: $scope.selecteddataType.Id,           
            Name: $scope.testName           
        };

        testAPIService.createdata(test);
        $scope.show('dashboardMenu');        
    };

$scope.createMenu = true;
    $scope.show = function(value) {
        if (value === 'createMenu') {
            $scope.clear();           
            $scope.createMenu = true;          
            $scope.dashboardMenu = false;           
            $scope.submitted = false;
            $scope.init();
        }
        if (value === 'dashboardMenu') {
            $scope.clear();

            $scope.createMenu = false;

            //get the All reports 
            testAPIService.getdataSummary().success(function(response) {
                $scope.dashboard = response;
                $scope.dashboardMenu = true;
            }).error(function (response) {
                alert(response.responseText);
            });
            $scope.init();
        }
    }

在Service.js

中

testAPIService.getdataSummary = function () {
        var request = {
            url: urlBase + 'GetSummary',
            method: 'Get',
            headers: {
                'accept': 'application/json'
            }
        }
        return $http(request);
    };

如何解决这个问题？感谢

在AngularJs中单击按钮时数据不会刷新

0 个答案: