3
Answers

MVC Table Filtering using AngularJS

Neuronring R

Neuronring R

9y
622
1
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>



 











Answers (3)