插入新記錄後，ng-repeat不會更新。點擊刷新提前

Question

感謝後，其更新，我做angularJS

1. 當後插入新記錄不NG重複DIV加載面臨兩個問題。它得到了後，才清爽頁面更新，但NG-重複工作，當更新記錄
2. ac.getDetails（）方法，在每次請求觸發其保存和

我的代碼細節顯示更新下面，

details.html：

<div class="col-md-12" ng-init="ac.getDetails()"> 
    <h3><b>{{ac.name}}</b></h3> 
</div> 

<div class="col-md-12 row"> 
    <a class="btn btn-primary pull-right" href="#" ng-click="ac.addDetails()">Add User</a> 
</div> 

<div class="col-md-12"> 
    <div class="col-md-4"> 
     <b>Name</b> 
    </div> 
    <div class="col-md-3"> 
     <b>Date Of Birth</b> 
    </div> 
    <div class="col-md-3"> 
     <b>Status</b> 
    </div> 
    <div class="col-md-1"> 

    </div> 
    <div class="col-md-1"> 

    </div> 
</div> 

<div ng-repeat="item in ac.details" class="col-md-12"> 
    <div class="col-md-4"> 
     {{item.Name}} 
    </div> 
    <div class="col-md-3"> 
     {{ item.DateOfBirth.slice(6, -2) | date:'MM/dd/yyyy'}} 
    </div> 
    <div class="col-md-3"> 
     {{item.Status}} 
    </div> 
    <div class="col-md-1"> 
     <a ng-click="ac.editDetails(item.Id)"><i class="glyphicon glyphicon-pencil"></i></a> 
    </div> 
    <div class="col-md-1"> 
     <a ng-click="ac.deleteDetails(item.Id)"><i class="glyphicon glyphicon-remove text-danger"></i></a> 
    </div> 
</div> 

detailsCtrl的.js：

(function() { 
    'use strict'; 
    angular 
     .module('angularapp') 
     .controller('angularController', angularController) 
    .controller('ModalInstanceCtrl', modalInstanceCtrl); 

    function angularController(getPlayerDetailsSvc, $uibModal, postPlayerDetailsSvc, $filter, $scope) { 
     var ac = this; 
     ac.name = "User Details";   

     ac.getDetails = function() { 
      getPlayerDetailsSvc.query(function (data) { 
       ac.details = data; 
      }); 
     } 

     ac.addDetails = function() { 
      var modalInstance = $uibModal.open({ 
       templateUrl: '/Modules/angular/template/user.html', 
       controller: 'ModalInstanceCtrl', 
       resolve: 
        { 
         items: function() { 
          return { 
           info: [{ 
            Id: null, 
            Name: '', 
            DateOfBirth: '', 
            Status: false 
           }], 
           title: 'Add User' 
          } 

         } 
        } 
      }); 

      modalInstance.result.then(function (details) { 
       var info = details; 
       info.DateOfBirth = $filter('date')(new Date(info.DateOfBirth), "yyyy-MM-dd HH:mm:ss"); 

       postPlayerDetailsSvc.save({ model: info }, function (response) { 
        ac.details = response.Value; 
       }); 
      }); 
     } 

     ac.editDetails = function(id) { 
      getPlayerDetailsSvc.query({ id: id }, function (data) { 
       data[0].DateOfBirth = $filter('date')((data[0].DateOfBirth.slice(6, -2)), "MM/dd/yyyy"); 
       var modalInstance = $uibModal.open({ 
        templateUrl: '/Modules/angular/template/user.html', 
        controller: 'ModalInstanceCtrl', 
        resolve: 
         { 
          items: function() { 
           return { 
            info: data, 
            title: 'Edit User' 
           } 

          } 
         } 
       }); 

       modalInstance.result.then(function (details) { 
        var info = details; 
        info.DateOfBirth = $filter('date')(new Date(info.DateOfBirth), "yyyy-MM-dd HH:mm:ss"); 

        postPlayerDetailsSvc.save({ model: info }, function (response) { 
         ac.details = response.Value; 
        }); 
       }); 
      }); 
     } 
    } 

    function modalInstanceCtrl(items, $scope, $uibModalInstance, $filter) { 
     $scope.title = items.title; 
     $scope.Details = items.info[0]; 

     $scope.closeDetails = function() { 
      $uibModalInstance.dismiss('cancel'); 
     }; 

     $scope.ok = function() { 
      $scope.Details.DateOfBirth = $(startdate).val(); 
      $uibModalInstance.close($scope.Details); 
     }; 
    } 
})(); 

detailsS​​vc.js：

(function(){ 
    angular 
     .module('angularapp') 
    .factory('getPlayerDetailsSvc', function ($resource) { 
     return $resource("/Angular/GetDetails/:id"); 
    }) 
    .factory('postPlayerDetailsSvc', function ($resource) { 
     return $resource("/Angular/SaveDetails/:model"); 
    }); 
})(); 

Utilities.cs：

public class Utilities 
    { 
     public static List<SampleV22> GetPlayerDetails(int? id) 
     { 
      ExamEntities2 context = new ExamEntities2(); 
      List<SampleV22> lstDetails; 
      if (id.HasValue) 
       lstDetails = (from m in context.SampleV22 
           where m.Id == id.Value 
           select m).ToList(); 
      else 
       lstDetails = (from m in context.SampleV22 
           select m).ToList(); 
      return lstDetails; 
     } 

     public static KeyValuePair<bool, List<SampleV22>> SavePlayerDetails(SampleV22 model) 
     { 
      KeyValuePair<bool, List<SampleV22>> dicInfo = new KeyValuePair<bool, List<SampleV22>>(); 

      if (model.Id == 0) 
      { 
       SampleV22 sam = new SampleV22 
       { 
        Name = model.Name, 
        DateOfBirth = model.DateOfBirth, 
        Status = model.Status 
       }; 

       using (var _context = new ExamEntities2()) 
       { 
        _context.SampleV22.Add(sam); 
        _context.SaveChanges(); 
       } 
      } 
      else 
      { 
       using (var _context = new ExamEntities2()) 
       { 
        SampleV22 data = _context.SampleV22.SingleOrDefault(a => a.Id == model.Id); 
        data.DateOfBirth = model.DateOfBirth; 
        data.Name = model.Name; 
        data.Status = model.Status; 
        _context.Entry(data).State = System.Data.Entity.EntityState.Modified; 
        _context.SaveChanges(); 
       } 
      } 

      dicInfo = new KeyValuePair<bool, List<SampleV22>>(true, GetPlayerDetails(null)); 

      return dicInfo; 
     } 
    } 

AngularController.cs

[HttpGet] 
     public ActionResult GetDetails(int? id) 
     { 
      return Json(Utilities.GetPlayerDetails(id), JsonRequestBehavior.AllowGet); 
     } 

     [HttpPost] 
     public ActionResult SaveDetails(SampleV22 model) 
     { 
      return Json(Utilities.SavePlayerDetails(model), JsonRequestBehavior.AllowGet); 
     } 

Answer 1

嘗試使用timeout或evalAsync服務後添加新記錄。

postPlayerDetailsSvc.save({ model: info }, function (response) { 
    $scope.$evalAsync(function() { 
     ac.details = response.Value; 
    });   
}); 

，或者使用這裏

ac.getDetails = function() { 
    getPlayerDetailsSvc.query(function (data) { 
     $scope.$evalAsync(function() { 
     ac.details = data; 
    }); 
    }); 
}