过滤列表并以角度显示文本输入的结果答案

【问题标题】：filter list and show results on text entry in angular过滤列表并以角度显示文本输入的结果
【发布时间】：2016-10-18 03:21:04
【问题描述】：

我有一个 div 控制器，其中一个 div 使用 ng-init 在控制器内部的一个数组进行了初始化。我需要使用文本框中的文本作为过滤器来显示该数组内的过滤对象。我还需要在用户输入输入时显示对象。这是我的基本代码：

<!DOCTYPE html>
<html lang="en-US">
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="angular.min.js"></script>
<body>


<div ng-app="myApp" ng-controller="personCtrl">
<div style="display:none" ng-init="CustList=[
{custid:1,custname:'Raj Export House1',address:'Plot.No.123, Industrial Area, Noida 201301'},
{custid:2,custname:'Vinay Export House2',address:'Plot.No.567, Industrial Area, New Delhi 201301'},
{custid:3,custname:'Maya Export House3',address:'Plot.No.777, Industrial Area, Faridabad 201301'},
{custid:4,custname:'Devat Export House4',address:'Plot.No.425, Industrial Area, Gurgaon201301'},
{custid:5,custname:'Yespal Export House5',address:'Plot.No.153, Industrial Area, Noida 201301'},
{custid:6,custname:'Abhinav Export House6',address:'Plot.No.1423, Industrial Area, Noida 201301'},
{custid:7,custname:'Surya Export House7',address:'Plot.No.1253, Industrial Area, Noida 201301'},
{custid:8,custname:'Lalata Export House8',address:'Plot.No.12553, Industrial Area, Gurgaon 201301'},
{custid:9,custname:'Raj Export House9',address:'Plot.No.12553, Industrial Area, Noida 201301'},
{custid:10,custname:'Manu Export House10',address:'Plot.No.15823, Industrial Area, Noida 201301'}]"></div>
<label>Search</label>
<input type="text" ng-model="txtSearch" ng-change="CallSearch(txtSearch)">
<ul>
  <li style="display:none" ng-repeat="cust in CustList | filter:txtSearch">
    {{ cust.custid + '   ' + cust.custname + '   ' + cust.address + ',' }}
  </li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.CallSearch = function(textSearch)
{
    if(textSearch.length>0);
    $("li").css("display","block");
}
});
</script>

我也尝试使用ng-repeat="cust in CustListfunction() 并在作用域内定义了这个函数

      $scope.CustListfunction=function(){
      var result=[];
      angular.forEach($scope.CustList, function (item) {
      if($scope.textSearch.length>0)
        {
          result.push(item);
         }
        });
      return result;
      }

但它没有让我到任何地方，有什么我想念的吗？谢谢

【问题讨论】：

标签： angularjs arrays angularjs-ng-repeat ng-repeat

【解决方案1】：

这可能是你想要的：

<body>

  <div ng-app="myApp" ng-controller="personCtrl">
    <label>Search</label>
    <input type="text" ng-model="txtSearch">
    <ul>
      <li ng-if="txtSearch" ng-repeat="cust in CustList | filter:txtSearch">
        {{ cust.custid + '   ' + cust.custname + '   ' + cust.address + ',' }}
      </li>
    </ul>
  </div>

</body>

只有在输入搜索条件时才会显示结果。另外，正如这里已经说过的，将您的列表移动到控制器：

app.controller('personCtrl', function($scope) {
  $scope.CustList = [
    {custid: 1, custname: 'Raj Export House1', address: 'Plot.No.123, Industrial Area, Noida 201301'},
    {custid: 2, custname: 'Vinay Export House2', address: 'Plot.No.567, Industrial Area, New Delhi 201301'},
    {custid: 3, custname: 'Maya Export House3', address: 'Plot.No.777, Industrial Area, Faridabad 201301'},
    {custid: 4, custname: 'Devat Export House4', address: 'Plot.No.425, Industrial Area, Gurgaon201301'},
    {custid: 5, custname: 'Yespal Export House5', address: 'Plot.No.153, Industrial Area, Noida 201301'},
    {custid: 6, custname: 'Abhinav Export House6', address: 'Plot.No.1423, Industrial Area, Noida 201301'},
    {custid: 7, custname: 'Surya Export House7', address: 'Plot.No.1253, Industrial Area, Noida 201301'},
    {custid: 8, custname: 'Lalata Export House8', address: 'Plot.No.12553, Industrial Area, Gurgaon 201301'},
    {custid: 9, custname: 'Raj Export House9', address: 'Plot.No.12553, Industrial Area, Noida 201301'},
    {custid: 10, custname: 'Manu Export House10', address: 'Plot.No.15823, Industrial Area, Noida 201301'}
  ]
});

plunker：http://plnkr.co/edit/H5lY8lXDivCnKYfogRll?p=preview

【讨论】：

Thx ，我已经有了这个解决方案，但另外我希望客户详细信息仅在用户在文本框中输入内容时显示。所以页面加载时应该只有一个文本框。
只需将 ng-if="txtSearch" 添加到您的 li 元素，我更新了我的答案和 plunker
感谢您的回答，它有效。是否有任何解决方法可能涉及<input type="text" ng-model="txtSearch" ng-change="funcName(txtSearch)">，然后检查 txtSearch.length 以达到相同的效果，请建议
在您的情况下绝对是多余的，因为角度过滤器具有此功能，但是请参阅我的 plunker，我添加了第二个搜索字段，它使用 ng-change，然后我从 ng-repeat 中删除了过滤器并添加了跟踪...，所以角度不会添加 $$hashKey

【解决方案2】：

评论$scope.CustListfunction如果还在用，就不需要了
声明$scope.txtSearch
将 console.log('') 放入 CallSearch 以查看是否正确命中。
删除style="display:none" 以查看是否确实有效。在
我可能不会有 ng-init 这样的数组，请将其放在脚本中的 $scope.CustList= [.....] 中。不确定当前的设置是否有效..

希望这有助于缩小您的问题范围。

【讨论】：

感谢您的建议，正在处理它们并将重新编辑我的代码。处理 $scope.textSearch 可能会工作。之前我实际上可以从 textchange 的数组中获取所有对象，但它无法显示屏幕。

【解决方案3】：

这是我想出的解决方法，它接近我需要的：

<html lang="en-US">
<script src="angular.min.js"></script>
<script   src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<body>

<div  style="height:100px">

</div>

<div ng-app="myApp" ng-controller="personCtrl">
<div  ng-init="CustList=[
{custid:1,custname:' Export House1',address:'Plot.No.123, Industrial Area, Pune 200180'},
{custid:2,custname:'Vi Export House2',address:'Plot.No.567, Industrial Area, New Delhi 201301'},
{custid:3,custname:'May Export House3',address:'Plot.No.777, Industrial Area, Faridabad 201301'},
{custid:4,custname:'Dev Export House4',address:'Plot.No.425, Industrial Area, Mumbai 60021'},
{custid:5,custname:'Yes Export House5',address:'Plot.No.153, Industrial Area, Pune 200180'},
{custid:6,custname:'nav Export House6',address:'Plot.No.1423, Industrial Area, Pune 200180'},
{custid:7,custname:' Export House7',address:'Plot.No.1253, Industrial Area, Pune 200180'},
{custid:8,custname:'Lat Export House8',address:'Plot.No.12553, Industrial Area, Mumbai 201301'},
{custid:9,custname:' Export House9',address:'Plot.No.12553, Industrial Area, Pune 200180'},
{custid:10,custname:'Man Export House10',address:'Plot.No.15823, Industrial Area, Pune 200180'}]"></div>
<label>Search</label>
<input type="text" ng-model="txtSearch" ng-change="CallSearch(txtSearch)">
<ul>
  <li ng-show='myVar' class="filterlist"  ng-repeat="cust in CustList | filter:txtSearch">
    {{ cust.custid + '   ' + cust.custname + '   ' + cust.address + ',' }}
  </li>
</ul>
</div>


<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.myVar=false;
$scope.CallSearch = function(textSearch)
{

    if(textSearch.length>0);
    {
      $scope.myVar=!$scope.myVar;


    }

}
});
</script>

刚刚使用 ng-show，也可以使用 ng-disabled。非常感谢。

【讨论】：