Angular doesn't refresh the table after adding new item

Question

When i get GetAll(); angular function to refresh the table it called Because i get the alert message but it doesn't refresh the table.

I am new in AngularJS and i don't know how to solve that problem

Please help me

Here is my code:

        [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`

Thank you in advance

Ali Al Rahalah · Accepted Answer · 2015-10-11 21:45:54Z

1

You have to define the Continental ist ouside the function scope.

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

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

           alert('Done!')

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

};

answered Oct 11, 2015 at 21:45

Ali Al Rahalah

364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bartosz Czerwonka · Accepted Answer · 2015-10-11 23:17:08Z

0

Remove ng-controller from :

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

Now you have two scope and two lists of content and it's problem. In one scope you have a list that you show on view and in second scope you add elements and try refresh lists.

This is working code:

<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>

answered Oct 11, 2015 at 23:17

Bartosz Czerwonka

1,6511 gold badge11 silver badges11 bronze badges

2 Comments

Lucia Over a year ago

I removed it and it's finally working!! Thank you so much...i am new in angular, so can you please tell me what was wrong to avoid that again

Bartosz Czerwonka Over a year ago

Read this - docs.angularjs.org/guide/scope it's very important for angular developers

Collectives™ on Stack Overflow

Angular doesn't refresh the table after adding new item

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related