MVC Table Filtering using AngularJS
Hi All,
I have made my very first simple MVC 4 application . And populating the view in the form of a table.
I am now struggling with filtering the table. I googled a lot, and there are tons of useful links, But they all storing the angular controller array as hardcoded values. But, how do i store the values from my model..
Can you please help..?
$scope.items = [ {ISBN:"5674789", Name: "Asp.Net MVC", Price: 560, Quantity: 20}, {ISBN:"4352134",Name: "AngularJS", Price: 450, Quantity: 25}, {ISBN:"2460932",Name: "Javascript", Price: 180, Quantity: 15} ];
Below is my table which I want to filter as I start typing in the search box,.
@model IEnumerable<ProjectForm.Models.CreateProjectModel>
@{
ViewBag.Title = "Browse Tasks";
}
@using System.Web.Optimization
<h2>All Task List</h2>
<table id="tblData" class="table table-striped table-condensed table-hover table-bordered table-nonfluid">
<tr>
<th>
@Html.DisplayNameFor(model => model.task_id)
</th>
<th>
@Html.DisplayNameFor(model => model.task_desc)
</th>
<th>
@Html.DisplayNameFor(model => model.task_type)
</th>
<th>
@Html.DisplayNameFor(model => model.Priority)
</th>
<th>
@Html.DisplayNameFor(model => model.Task_status)
</th>
<th>
@Html.DisplayNameFor(model => model.Requester)
</th>
<th>
@Html.DisplayNameFor(model => model.RequestDate)
</th>
<th>
@Html.DisplayNameFor(model => model.busowner)
</th>
<th>
@Html.DisplayNameFor(model => model.devowner)
</th>
<th>
@Html.DisplayNameFor(model => model.StartDate)
</th>
<th>
@Html.DisplayNameFor(model => model.est_effort)
</th>
<th>
@Html.DisplayNameFor(model => model.Complete_date)
</th>
<th>
@Html.DisplayNameFor(model => model.act_effort)
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.task_id)
</td>
<td>
@Html.DisplayFor(modelItem => item.task_desc)
</td>
<td>
@Html.DisplayFor(modelItem => item.task_type)
</td>
<td>
@Html.DisplayFor(modelItem => item.Priority)
</td>
<td>
@Html.DisplayFor(modelItem => item.Task_status)
</td>
<td>
@Html.DisplayFor(modelItem => item.Requester)
</td>
<td>
@Html.DisplayFor(modelItem => item.RequestDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.busowner)
</td>
<td>
@Html.DisplayFor(modelItem => item.devowner)
</td>
<td>
@Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.est_effort)
</td>
<td>
@Html.DisplayFor(modelItem => item.Complete_date)
</td>
<td>
@Html.DisplayFor(modelItem => item.act_effort)
</td>
</tr>
}
</table>