将当前搜索结果添加为表的新行

时间:2018-11-23 20:28:21

标签: html angularjs asp.net-mvc

我有一个搜索文本框,它将从数据库中搜索客户记录。客户记录中包含“姓名”,“年龄”,“地址”以及更多字段。我正在搜索单个客户名称,并将该客户详细信息显示在表格中。

第一次搜索后,如果我搜索其他客户名称,则当前客户详细信息将替换该表中的先前搜索结果。

我想在同一表格中显示所有搜索结果(即上一个,当前)。

我正在使用angularjs。这是我的搜索角度控制器代码

$scope.search = function () {
    var price = '{custName: "' + $scope.Prefix + '" }';
    var post = $http({
        method: "POST",
        url: "/api/Price/GetDetails",
        dataType: 'json',
        data: price,
        headers: { "Content-Type": "application/json" }
    });
    post.success(function (data, status) {
        $scope.Customers = data;
        $scope.IsVisible = true;
    });
    post.error(function (data, status) {
        $window.alert(data.Message);
    });
};

html代码

<div class="controls">
                                    <input type="text" ng-model="Prefix" placeholder="Search Material..." class="form-control" /><br />
                                    <button type="button" class="btn btn-outline-dark" ng-click="search()">Search</button>
                                </div>

表格html代码

<tbody ng-repeat="m in Customers">
                                                    <tr>
                                                        <td align="center">
                                                            <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                                            <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                                                        </td>
                                                        <td class="hidden-xs">1</td>
                                                        <td>{{m.PM}}</td>
                                                        <td>{{m.Description}}</td>
                                                        <td>{{m.Hier}}</td>

如何显示该表中的所有搜索结果

1 个答案:

答案 0 :(得分:0)

您必须将结果存储在变量中,并继续将新结果附加到该变量中。我们可以为此使用Javascript的concat()函数。

var dataAll = [];
$scope.search = function () {
    var price = '{custName: "' + $scope.Prefix + '" }';
    var post = $http({
        method: "POST",
        url: "/api/Price/GetDetails",
        dataType: 'json',
        data: price,
        headers: { "Content-Type": "application/json" }
    });
    post.success(function (data, status) {
        dataAll = dataAll.concat(data);
        $scope.Customers = dataAll;
        $scope.IsVisible = true;
    });
    post.error(function (data, status) {
        $window.alert(data.Message);
    });
};

然后,您还需要一个清除按钮,以将dataAll重置为[]。