将jQuery转换为Angular需要帮助

我们有一个使用以下代码通过jQuery ajax填充的表：

$.ajax({
    type:  "POST",
    cache: false,
    url:   "/files/event_lister.php", // script that gets data from
                                      // DB and responds with JSON sample shown below
    data:  input_data,
    dataType: "json",
    success: function(data) {
        var html = "";
        $.each(data["events"], function(id, event) {
            course_url = "/courses/" + group_titles[event["ProgramGroup"]] + 
                         "/" + url_titles[event["ProgramCode"]] + "/" +
                         event["EventCode"] ;
            html += "<tr>" +
            "          <td>" + event["Course_Type"] + "</td>" +
            "          <td>" + event["FormalDate"] + "</td>" +
            "          <td>" + event_lookup[event["ProgramCode"]] + "</td>" +
            "          <td>" + (parseInt(event["Price"]) > 0 ? "$" + parseInt(event["Price"]) : "&nbsp;") + "</td>" +
            "          <td class="nb">" +
            "            <a href=\"" + course_url + "\">Details</a>" +
            "        </td>" +
            "      </tr>";
        });
        if (html ==  "") {
            html="<tr><td colspan=5 class="fullspan"><p>No Results to display.</p></td></tr>";
        }
        $("#events_tbody").html(html); // #events_body is tbody of table
    }
});

$.ajax({
类型：“POST”，
cache:false，
url:“/files/event_lister.php”//从中获取数据的脚本
//DB并使用JSON示例进行响应，如下所示
数据：输入_数据，
数据类型：“json”，
成功：功能（数据）{
var html=“”；
$.each（数据[“事件”]，函数（id，事件）{
课程url=“/courses/”+组标题[事件[“程序组”]]
“/”+url_标题[事件[“程序代码”]]+“/”+
事件[“事件代码”]；
html+=“”+
“”+事件[“课程类型”]+“”+
“”+事件[“格式日期”]+“”+
“”+事件\u查找[事件[“程序代码]]+“”+
“+（parseInt（事件[“价格]）>0？”$“+parseInt（事件[“价格]）：”）+”+
"          " +
"            " +
"        " +
"      ";
});
如果（html==“”）{
html=“没有要显示的结果。
”；
}
$（“#events_tbody”）.html（html）；/#events_body是表的主体
}
});

我试图修改此小提琴中的示例代码以使用我的数据：

上面列出的第二部分中有JSON数据

<table class="table table-striped table-condensed table-hover">
    <thead>
    <tr>
        <th class="lb">Location<a ng-click="sort_by('Course_Type')"><i class="icon-sort"></i></a></th>
        <th width="75px">Date<a ng-click="sort_by('FormalDate')"><i class="icon-sort"></i></a></th>
        <th>Program<a ng-click="sort_by('Program')"><i class="icon-sort"></i></a></th>
        <th>Cost</th>
        <th>Information</th>
    </tr>
    </thead>
    <tfoot>
    <td colspan="6">
        <div class="pagination pull-right">
            <ul>
                <li ng-class="{disabled: currentPage == 0}">
                    <a href ng-click="prevPage()">« Prev</a>
                </li>
                <li ng-repeat="n in range(pagedItems.length)"
                    ng-class="{active: n == currentPage}"
                    ng-click="setPage()">
                    <a href ng-bind="n + 1">1</a>
                </li>
                <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                    <a href ng-click="nextPage()">Next »</a>
                </li>
            </ul>
        </div>
    </td>
    </tfoot>
    <tbody>
    <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
        <td>{{item.Course_Type}}</td>
        <td>{{item.FormalDate}}</td>
        <td>{{item.Program}}</td>
        <td>{{item.Price}}</td>
        <td>{{item.Info}}</td>
    </tr>
    </tbody>
</table>

位置






{{item.Course_Type}
{{item.FormalDate}
{{item.Program}
{{item.Price}}
{{item.Info}

数据不可编辑，因此不需要考虑双向性。我们只填写表格，然后用户单击课程url链接将课程添加到我们的购物车中。

这里有一个有效的搜索，但搜索还不起作用，您可以自己修复。

---

希望能有所帮助。

您是否检查过这个问题：我认为您没有正确创建过滤器。您在同一个问题上发布了两个链接，Spir发布的链接与我在问题中发布的链接相同。虽然我提出了使用ng grid的不同方法，但我接受您的答案。