如何使用AngularJs获取时间,然后将其绑定到从视图到控制器的输入时间
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用AngularJs获取时间,然后将其绑定到从视图到控制器的输入时间相关的知识,希望对你有一定的参考价值。
我正在使用ASP.NET MVC和AngularJS的项目中,试图使用时间输入类型来设置并从数据库中获取时间使用代码优先方法,我的问题是我想从中获取时间数据库然后将其绑定到输入时间,我成功插入了时间到数据库,但我有问题,我无法将其与输入绑定时间控制。
**Model**
public class Branches
public int Branch_ID get; set;
public string Branch_Name get; set;
public string Branch_Address get; set;
public string Branch_email get; set;
public string Branch_Notes get; set;
[DataType(DataType.Time)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = @"0:hh\:mm")]
public TimeSpan Branch_TimeFrom get; set;
[DataType(DataType.Time)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = @"0:hh\:mm")]
public TimeSpan Branch_TimeTo get; set;
**Controller**
public class BranchesController : Controller
private IRepositoryBase<Branches> BrancheRepository;
public BranchesController()
this.BrancheRepository = new BranchesRepository(new HrmDBContext());
public BranchesController(IRepositoryBase<Branches> brancheRepository)
this.BrancheRepository = brancheRepository;
// GET: Branches
[HttpGet]
public ActionResult Index()
return View();
[HttpPost]
public JsonResult Create(Branches branch)
try
if (ModelState.IsValid)
BrancheRepository.Create(branch);
//var branches = BrancheRepository.GetAll();
//return Json(new
//
// d = true,
// pv = RazorToString(this, "~/views/Branches/list.cshtml", branches),
//, JsonRequestBehavior.AllowGet);
return Json(new success = true );
else
return Json(new success = false );
catch (DataException dex)
ModelState.AddModelError(string.Empty, "Unable to save changes. Try again, and if the problem
persists contact your system administrator.");
return Json(new success = false );
// return View(branch);
[HttpPost]
public JsonResult Edit(Branches branch)
try
if (ModelState.IsValid)
BrancheRepository.Update(branch);
return Json(new success = true );
else
return Json(new success = false );
catch (DataException dex )
//Log the error (uncomment dex variable name after DataException and add a line here to write a log.
ModelState.AddModelError(string.Empty, "Unable to save changes. Try again, and if the problem persists contact your system administrator.");
return Json(new success = false );
**FetchBranchData.js**
var app = angular.module('myapp', []);
app.service("myService", function ($http)
//get All Branches
this.getAllBranches = function ()
return $http.get("Branches/GetAllBranches");
;
//$http.get(url).then(response)
// var data = response.data;
// data.Branch_TimeFrom = new Date(data.Branch_TimeFrom);
// data.Branch_TimeTo = new Date(data.Branch_TimeTo);
// $scope.data = data;
//);
//add new Branch
this.save = function (Branch)
var request = $http(
method: 'post',
url: '/Branches/Create',
data: Branch
);
return request;
;
//update Employee records
this.update = function (Branch)
var updaterequest = $http(
method: 'post',
url: '/Branches/Edit',
data: Branch
);
return updaterequest;
;
);
app.controller("branchcontroller", function ($scope, myService)
getAllBranches();
function getAllBranches()
var getData = myService.getAllBranches();
getData.then(function (response)
$scope.Branches = response.data;
, function (error)
console.log(error);
alert('Error in getting records');
);
;
//save Branch data
$scope.save = function ()
debugger
var Branch =
Branch_Name: $scope.Branch_Name,
Branch_Address: $scope.Branch_Address,
Branch_email: $scope.Branch_email,
Branch_Notes: $scope.Branch_Notes,
Branch_TimeFrom: moment($scope.Branch_TimeFrom).format('HH:mm:ss'),
Branch_TimeTo: moment($scope.Branch_TimeTo).format('HH:mm:ss'),
Branch_Manager: $scope.Branch_Manager,
Branch_Phone: $scope.Branch_Phone,
saturday: $scope.saturday
;
var saverecords = myService.save(Branch);
saverecords.then(function (response)
if (response.data.success === true)
getAllBranches();
alert("Branch added successfully");
$scope.resetSave();
else alert("Branch not added.");
,
function ()
alert("Error occurred while adding branch.");
);
;
//reset controls after save operation
$scope.resetSave = function ()
$scope.Branch_Name = '';
$scope.Branch_Address = '';
$scope.Branch_email = '';
$scope.Branch_Notes = '';
$scope.Branch_TimeFrom = '';
$scope.Branch_TimeTo = '';
$scope.Branch_Manager = '';
$scope.Branch_Phone = '';
$scope.saturday = '';
;
//get single record by ID
$scope.getForUpdate = function (Branch)
debugger
$scope.Branch_ID = Branch.Branch_ID;
$scope.Branch_Name = Branch.Branch_Name;
$scope.Branch_Address = Branch.Branch_Address;
$scope.Branch_email = Branch.Branch_email;
$scope.Branch_Notes = Branch.Branch_Notes;
$scope.Branch_TimeFrom = moment(Branch.Branch_TimeFrom).format('hh:mm:ss a');
$scope.Branch_TimeTo = moment(Branch.Branch_TimeTo).format('hh:mm:ss a');
$scope.Branch_Manager = Branch.Branch_Manager;
$scope.Branch_Phone = Branch.Branch_Phone;
$scope.saturday = Branch.saturday;
;
//update Branch data
$scope.update = function ()
var Branch =
Branch_ID: $scope.Branch_ID,
Branch_Name: $scope.Branch_Name,
Branch_Address: $scope.Branch_Address,
Branch_email: $scope.Branch_email,
Branch_Notes: $scope.Branch_Notes,
Branch_TimeFrom: $scope.Branch_TimeFrom,
Branch_TimeTo: $scope.Branch_TimeTo,
Branch_Manager: $scope.Branch_Manager,
Branch_Phone: $scope.Branch_Phone,
saturday : $scope.saturday
;
var updaterecords = myService.update(Branch);
updaterecords.then(function (response)
if (response.data.success === true)
getAllBranches();
alert("Branch updated successfully");
$scope.resetUpdate();
else
alert("Branch not updated.");
,
function ()
alert("Error occured while updating Branch record");
);
;
//reset controls after update
$scope.resetUpdate = function ()
$scope.Branch_Name = '';
$scope.Branch_Address = '';
$scope.Branch_email = '';
$scope.Branch_Notes = '';
$scope.Branch_TimeFrom = '';
$scope.Branch_TimeTo = '';
$scope.Branch_Manager = '';
$scope.Branch_Phone = '';
$scope.saturday = '';
;
;
Index.cshtml
<div class="container" ng-controller="branchcontroller">
<table class="table table-bordered">
<thead style="background-color:lightblue;">
<tr>
<th>Branch Address</th>
<th>Branch Email</th>
<th>Branch Name</th>
<th>Branch Notes</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="branche in Branches">
<td>branche.Branch_Address</td>
<td>branche.Branch_email</td>
<td>branche.Branch_Name</td>
<td>branche.Branch_Notes</td>
<td style="width:200px;">
<a href="#"
class="btn btn-info"
data-toggle="modal"
data-target="#Update"
ng-click="getForUpdate(branche)">
Update
</a>
<a href="#" class="btn btn-danger"
id="btnDelete"
data-toggle="modal"
data-target="#deleteDialog"
ng-click="getForDelete(branche)">
Delete
</a>
</td>
</tr>
</tbody>
</table>
@*Upadate Branch records*@
<div class="modal" id="Update" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="text-info">Update Existing Branch</h3>
</div>
<div class="modal-body" style="margin-left:20px">
@*Update Employee form starts here...*@
<form class="form-horizontal" name="UpdateBranchForm">
<div class="form-group">
<input class="form-control" readonly="readonly" name="Branch_ID" ng-model="Branch_ID" type="hidden" placeholder="Branch ID" />
</div>
<div class="form-group">
<label class="control-label"> Branch Address</label>
<input class="form-control" name="Branch_Address" ng-model="Branch_Address" type="text" placeholder="Branch Address" />
</div>
<div class="form-group">
<label class="control-label"> Branch email</label>
<input class="form-control" name="Branch_email" ng-model="Branch_email" type="email" placeholder="Branch email" />
</div>
<div class="form-group">
<label class="control-label"> Branch Name</label>
<input class="form-control" name="Branch_Name" ng-model="Branch_Name" type="text" placeholder="Branch Name" />
</div>
<div class="form-group">
<label class="control-label"> Branch Manager</label>
<input class="form-control" name="Branch_Name" ng-model="Branch_Manager" type="text" placeholder=" Branch Manager" />
</div>
<div class="form-group">
<label class="control-label"> Branch Phone</label>
<input class="form-control" name="Branch_Name" ng-model="Branch_Phone" type="text" placeholder="Branch Phone" />
</div>
<div class="form-group">
<label class="control-label"> Branch Notes</label>
<textarea class="form-control" name="Branch_Notes" ng-model="Branch_Notes" placeholder="Branch Notes"></textarea>
</div>
<div class="form-group">
<label class="control-label"> Time From</label>
<input ng-model="Branch_TimeFrom" type="time" name="Branch_TimeFrom" placeholder="HH:mm">
</div>
<div class="form-group">
<label class="control-label"> Time To</label>
<input ng-model="Branch_TimeTo" type="time" name="Branch_TimeTo" placeholder="HH:mm">
</div>
<div class="form-group">
<label class="control-label"> saturday</label>
<input ng-model="saturday" type="checkbox" name="saturday" placeholder="saturday">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnUpdate" data-dismiss="modal" ng-click="update()">
Update
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
这里我想从数据库中获取时间,然后以输入类型显示它时间
这是我从数据库中获取它的时间,然后我希望它显示输入类型时间
答案
AngularJS框架需要绑定javascript Date
对象:
以上是关于如何使用AngularJs获取时间,然后将其绑定到从视图到控制器的输入时间的主要内容,如果未能解决你的问题,请参考以下文章
AngularJS + JQuery:如何在 angularjs 中获取动态内容
如何使用AngularJS动态更新.less文件中的输入值变量