Question

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

<!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

这是你可能想要的：

<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

Answer 2

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

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

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

过滤列表并以角度显示文本条目的结果

3 个答案: