Question

先谢谢，我在做angularJS时面临两个问题

插入新记录后未加载ng-repeat div。它仅在刷新页面后更新但更新记录时ng-repeat正在工作
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);
        };
    }
})();

detailsSvc.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;
    });  
   });
 }

插入新记录后，ng-repeat不会更新。单击刷新后更新

1 个答案: