Question

我有一个搜索栏，允许用户根据他们使用angular的条目进行过滤。现在，当用户输入的搜索词与数组中的任何内容都不匹配时，我希望能够显示“Nothing match your search”这样的消息。

我尝试使用ng-change监视用户的输入，然后循环遍历数组，搜索用户输入的每个参数，但这不起作用。这是我的代码示例。

HTML

<input ng-model="search" ng-change="check(search)">
<h4 ng-if="found === 0 ">Nothing matches your search</h4>
<div ng-controller="imCtrl" ng-repeat="imprest in imprests | filter:search">
    <h2>{{imprest.name}}</h2>
</div>

控制器

var office = angular.module('Office');

office.controller('imCtrl',[$scope,function('$scope'){
     $scope.imprests = [
          {name:'John'},
          {name:'Peter'}
     ]

     $scope.check = function (word) {
        var found = 0
        $scope.searching = true
        for (var i = 0; i < $scope.vendorForms.length; i++) {
            if($scope.imprests[i].name.includes(word){
                found++
            } 
        }
        $scope.found = found
        $scope.searching = true
        $scope.done = true
    }
})

是否可以知道过滤后的数组的长度，以便显示消息？

Answer 1

您可以使用别名：

[WebMethod]
public string POSTXml(string username, string password)
{
    WebRequest req = null;
    WebResponse rsp = null;
    try
    {
        string data = "user=" + username + "&password=" + password;
        string url = "http://xyz.in/getuser.php/";

        byte[] buffer = Encoding.ASCII.GetBytes(data);
        HttpWebRequest WebReq = (HttpWebRequest)WebRequest.Create(url);


        WebReq.Method = "POST";
        WebReq.ContentType = "application/x-www-form-urlencoded";
        WebReq.ContentLength = buffer.Length;

        using (Stream PostData = WebReq.GetRequestStream())
        {
            PostData.Write(buffer, 0, buffer.Length);

            HttpWebResponse WebResp = (HttpWebResponse)WebReq.GetResponse();

            using (Stream stream = WebResp.GetResponseStream())
            {
                using (StreamReader strReader = new StreamReader(stream))
                {
                    return strReader.ReadToEnd();                            
                }                        
            }
            WebResp.Close();
       }

    }
    catch (Exception e)
    {
        throw new Exception("There was a problem sending the message");
    }
    return String.Empty;
}

然后你可以访问：

ng-repeat="imprest in imprests | filter:search as filtered"

Answer 2

您可以编写滤镜功能并使用它以角度代码过滤数组，然后检查它的长度。

<div class="largebox">
  <div class="box1"></div>

</div>

标记中的

可以像

一样使用

$scope.myFilter(){
   // ... here your logic 
   // you need to compare with $scope.search
   // and then return the new array and check it's length
}

Answer 3

您应该可以使用(imprests | filter:search).length == 0执行此操作，然后您可以添加ng-change来代替ng-show功能，以显示错误，如下所示：

<input ng-model="search">
<h4 ng-if="found === 0 ">Nothing matches your search</h4>
<div ng-controller="imCtrl" ng-repeat="imprest in imprests | filter:search" ng-show="(imprests | filter:search).length !== 0">
    <h2>{{imprest.name}}</h2>
</div>
<div ng-show="(imprests | filter:search).length === 0">
    <h2>No results found</h2>
</div>

如何知道角度过滤数组的长度

3 个答案: