筛选列表并在 angular 中的文本输入中显示结果

Question

我有一个 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;
      }

但它并没有带我到任何地方，有没有我遗漏的东西。谢谢

Answer 1

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

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

Answer 2

这可能是您想要的：

<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'}
  ]
});

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

Answer 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 too.Many 谢谢。

筛选列表并在 angular 中的文本输入中显示结果

filter list and show results on text entry in angular

arrays

angularjs

ng-repeat

angularjs-ng-repeat