我在使用 AngularJS 进行数据绑定时遇到问题

Question

我是 Angular JS 的新手。我在使用 AngularJS 进行数据绑定时遇到问题。它适用于字符串，但不适用于日期时间。我正在将 ASP.net MVC 与 Angular JS 和 jQuery UI 一起用于日期选择器。

1. 数据来自数据库（控制器），采用 JSON 格式。
2. 通过使用 Angular JS 进行数据绑定，它会自动设置为输入框。
3. 在输入框中附加了 jQuery UI 日期选择器。

它适用于除日期时间以外的所有字段。

案例 1：如果我设置 input type="date" 然后输入日期字段为空。

案例 2：如果我设置 input type="string" 然后它在输入中显示值，即。 /日期(1481481000000)/

这是我的控制器代码：

    // GET: ProductMaster/Details/5
    public ActionResult Details(int PrimaryKey)
    {
        try
        {
            using (LOAN_APPRAISAL_TESTEntities db = new LOAN_APPRAISAL_TESTEntities())
            {

                var v = (from v1 in db.m_ProductMaster where v1.ProductID == PrimaryKey select v1).First();
                ProductMasterModel product = new ProductMasterModel();
                v.MapToModelObject(product);
                return Json(product, JsonRequestBehavior.AllowGet);
            }
        }
        catch (Exception e1)
        {
            return Json(new ResultModel() { Result = tssiplResultType.tssiplError, Message = e1.Message, Data = null }, JsonRequestBehavior.AllowGet);
        }
    }

这是我的 Angular JS 代码

$.ajax({
        url: '/ProductMaster/Details',
        type: 'GET',
        cache: false,
        async: false,
        data: { PrimaryKey: ProductID },
        contentType: 'application/json; charset=utf-8',
        error: function (a, b, c) {
            HideBusy();
            alert(a.responseText);
        },
        success: function (a, b, c) {
            HideBusy();
            debugger;
            $scope.ProductMasterModel = a; // this is my Angular Model

            //debugger;
              //debugger;
            $('#divEdit').modal('show');
        }
    });

这是我的 HTML

                        <div class='input-group date .form_datetime'>
                            <label>Valid From</label>
                            <input class="form-control" ControlType="Date" type="date" 
                                   min="1900-01-01"
                                   max="2500-01-01"
                                   ng-model="ProductMasterModel.ValidFrom" />

                        </div>


                        <label>Valid To</label>
                        <input class="form-control" ControlType="Date" type="text" 
                                   min="1900-01-01"
                                   max="2500-01-01"
                                   ng-model="ProductMasterModel.ValidTo"/>

注意： 我不想使用 input type="date" 因为 HTML5 日期选择器不适用于所有浏览器，因此更喜欢使用 jQuery UI 日期选择器。

我浏览了几个链接，每个链接都显示格式化日期并以跨度显示。

Answer 1

在您的领域中使用角度 $filter

 <input class="form-control" ControlType="Date" type="text" min="1900-01-01"
                                   max="2500-01-01"
                                   ng-model="ProductMasterModel.ValidFrom | date" />