添加新项目后,Angular不刷新表

时间:2015-10-11 20:57:52

标签: angularjs

当我得到GetAll();用于刷新它调用的表的angular函数因为我得到了警告消息但它没有刷新表。

我是AngularJS的新手,我不知道如何解决这个问题

请帮帮我

这是我的代码:

        [HttpGet]
        public JsonResult GetAllContinents()
        {

            MyDatabaseEntities db = new MyDatabaseEntities();
            var Result = (from con in db.Continents select new { ContinentId = con.ContinentId, ContinentName = con.ContinentName.Trim() }).ToList();
            return Json(Result, JsonRequestBehavior.AllowGet);

        }


HTML:




<div data-ng-controller="myCntrl">


    <div class="col-md-12">
        <table class="table table-bordered table-hover" style="width:800px">
            <thead>
                <tr>
                    <th><b></b>ID<b></b></th>
                    <th>continent Name</th>
                    <th>Modify</th>

                </tr>
            </thead>
            <tbody>

                <tr data-ng-repeat="con in ContinentsList">
                    <td>{{con.ContinentId}}</td>
                    <td>{{con.ContinentName}}</td>
                    <td>
                        <button class="btn btn-md glyphicon glyphicon-trash"
                                title="Click here to delete record" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


    <div data-ng-controller="myCntrl">
    Enter Continent Name:  <input type="text" ng-model="Continent.ContinentName" />
    <input type="button" value="Add" ng-click="AddContinent()" />
</div>


AngularJs:


app.controller("myCntrl", function ($scope, $http,  angularService) {



    $scope.GetAll = function () {

        $scope.ContinentsList = [];
        $http.get('/Home/GetAllContinents')
           .success(function (data) {


               $scope.ContinentsList = data;
               alert('Done!')

           })
           .error(function (msg) {
               alert(msg);
           })

    };


 $scope.GetAll();

 $scope.AddContinent = function () {
     $http.post('/Home/AddContinent', { Con: $scope.Continent })
     .success(function (data) {
         $scope.clear();
         $scope.GetAll();

     })
     .error(function (msg) {
         alert(msg)
     })


 };`enter code here`

提前谢谢

2 个答案:

答案 0 :(得分:1)

您必须将Continental ist ouside定义为功能范围。

       $scope.ContinentsList = [];
        function getAll () {

    $http.get('/Home/GetAllContinents')
       .success(function (data) {
           $scope.ContinentsList = data;

           alert('Done!')

       })
       .error(function (msg) {
           alert(msg);
       })

};

答案 1 :(得分:0)

从以下位置删除ng-controller:

   <div data-ng-controller="myCntrl">
    Enter Continent Name:  <input type="text" ng-model="Continent.ContinentName" />
    <input type="button" value="Add" ng-click="AddContinent()" />
</div>

现在你有两个范围和两个内容列表,这是问题所在。在一个范围内,您有一个在视图中显示的列表,在第二个范围中,您可以添加元素并尝试刷新列表。

这是有效的代码:

<div  data-ng-controller="myCntrl">


    <div class="col-md-12">
        <table class="table table-bordered table-hover" style="width:800px">
            <thead>
                <tr>
                    <th><b></b>ID<b></b></th>
                    <th>continent Name</th>
                    <th>Modify</th>

                </tr>
            </thead>
            <tbody>

                <tr data-ng-repeat="con in ContinentsList">
                    <td>{{con.ContinentId}}</td>
                    <td>{{con.ContinentName}}</td>
                    <td>
                        <button class="btn btn-md glyphicon glyphicon-trash"
                                title="Click here to delete record" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    Enter Continent Name:  <input type="text" ng-model="Continent.ContinentName" />
    <input type="button" value="Add" ng-click="AddContinent()" />
</div>
相关问题