AngularJS搜索名称和计数重复

时间:2017-06-29 05:35:03

标签: javascript angularjs asp.net-mvc linq

我对此应用程序有疑问:

此应用程序从包含某些名称的数据库中获取som数据。如果存在匹配项,则用户配偶键入名称,该名称将打印出该名称以及该名称在数据库中的时间。

这是我的观点:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="~/Scripts/app.js"></script>
</head>
<body>
     <h1>Search for a Name Here</h1>
     <div ng-app="myApp" ng-controller="myCtrl">
     <input type="text" placeholder="Search Employee" ng-model="searchemp" />
     <table border="1">
         <tr>
             <th>First Name</th>
             <th>Middle Name</th>
             <th>Last Name</th>
             <th>Count</th>
         </tr>
         <tr ng-repeat="x in empJson | filter : searchemp">
             <td>{{ x.firstname }}</td>
             <td>{{ x.middlename }}</td>
             <td>{{ x.lasttname }}</td>
             <td>{{ x.count }}</td>
         </tr>
     </table>
</body>
</html>

这是我的剧本:

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http({
method: 'GET',
url: '/Home/getEmp'
}).then(function (response) {
$scope.emp = response.data;
    }, function (error) {
 });
});

这是我的控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
    /*

     */
    public JsonResult getEmp()
    {

        Database1Entities obj = new Database1Entities();
        List<empJson> toReturn = (from temp in obj.emps
                                  group temp by temp.firstname + " " + temp.middlename + " " + temp.lastname into x
                                  select new empJson()
                                  {
                                      fullname = x.Key,
                                      count = x.Count(),

                                  }).ToList();
        return Json(toReturn, JsonRequestBehavior.AllowGet);
        //shopProducts.Where(p => names.Contains(p.Name))
        //               .ToList();
    }
}

/*

*/
    class empJson
    {
        public string fullname { get; set; }
        public String first { get; set; }
        public String middle { get; set; }
        public String last { get; set; }
        public int count { get; set; }
    }

这是数据库:

    using System;
    using System.Collections.Generic;

public partial class emp
{
    public int Id { get; set; }
    public string firstname { get; set; }
    public string middlename { get; set; }
    public string lastname { get; set; }
}

列表样本:

Meriel J Oscar, Mike T Ree, Mike T Ree, Mike T Ree, 迈克布朗, Mike T Ree, Robert Tah,

When I run this code it shows like:

Image of the error

它配偶就像

Mike T Ree 4

2 个答案:

答案 0 :(得分:1)

你是否期望这个输出,尝试下面运行下面的代码一次,我仍然感到困惑你在角度控制器中定义empJson

&#13;
&#13;
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {

$scope.empJson = [{firstname:' Meriel J Oscar'},
{firstname:'Mike T Ree'},
{firstname:'Mike T Ree'},
{firstname:'Mike T Ree'},
{firstname:'Mike T Ree'},
{firstname:'Meriel J Oscar'},
{firstname:'Robert Tah'},
{firstname:'Meriel J Oscar'}];

});
&#13;
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="~/Scripts/app.js"></script>
</head>
<body>
     <h1>Search for a Name Here</h1>
     <div ng-app="myApp" ng-controller="myCtrl">
     <input type="text" placeholder="Search Employee" ng-model="searchemp" />
     <table border="1">
         <tr>
             <th>First Name</th>
             <th>Count</th>
         </tr>
         <tr ng-repeat="x in emp=(empJson | filter : searchemp)">
             <td>{{ x.firstname }}</td>
              <td>{{ emp.length }}</td>
         </tr>
     </table>
</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

添加

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="~/Scripts/app.js"></script>

到您的布局页面。

在Index.cshtml添加

<h1>Search for a Name Here</h1>
<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" placeholder="Search Employee" ng-model="searchemp" /><br /><br />
    <table border="1">
        <tr>
            <th>Full Name</th>
            <th>Count</th>
        </tr>
        <tr ng-repeat="x in emp | filter : searchemp">
            <td>{{ x.fullname}}</td>
            <td>{{ x.count }}</td>
        </tr>
    </table>
</div>

在控制器上,带有样本数据的方法是

public JsonResult GetEmp()
    {

        //Database1Entities obj = new Database1Entities();
        List<empJson> json = new List<empJson> {
            new empJson {first="Meriel", fullname="Meriel J Oscar", count=1, last="Oscar", middle="J"},
            new empJson {first="Mike", fullname="Mike T Ree", count=4, last="Ree", middle="T"},
            new empJson {first="Mike", fullname="Mike T Ree", count=4, last="Ree", middle="T"},
            new empJson {first="Mike", fullname="Mike T Ree", count=4, last="Ree", middle="T"},
            new empJson {first="Mike", fullname="Mike brown", count=1, last="brown", middle=""},
            new empJson {first="Mike", fullname="Mike T Ree", count=4, last="Ree", middle="T"},
            new empJson {first="Robert", fullname="Robert Tah", count=1, last="Tah", middle=""}
                };

        List<empJson> toReturn  = (from temp in json
                                   group temp by temp.first + " " + temp.middle + " " + temp.last into x
                                  select new empJson()
                                  {
                                      fullname = x.Key,
                                      count = x.Count(),

                                  }).ToList();

        return Json(toReturn, JsonRequestBehavior.AllowGet);
    }