使用Angularjs的简单MVC4 Razor表UI过滤

时间:2015-04-20 14:50:55

标签: asp.net-mvc angularjs

我有一个simpe MVC 4应用程序。这是我的第一个ASP.NET MVC项目,我完成了View-Controller-Model绑定并以表格格式获得结果。现在我的挑战是使用AngularJS过滤数据。我google了很多。到目前为止我看到的所有示例都是app.js控制器中的高级或硬编码值。有人可以指导我如何使用AngularJs实现简单过滤。我需要做些什么来实现同样的目标。

以下是我的观点(Index.html)

    @model IEnumerable<ProjectForm.Models.CreateProjectModel>
    @{
    ViewBag.Title = "Browse Tasks";
    }
    @using System.Web.Optimization

    <h2>All Task List</h2>
   <table 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>

</body>

我还在Stack Overflow中找到了最接近的解决方案,但它并不完整。 Sorting MVC razor UI table using Angularjs

0 个答案:

没有答案