0

我制作了一个filter.It的演示,它工作的很好。现在我需要使用相同的代码或逻辑进行自动完成。当我运行项目时,我的列表会显示整个时间。我需要当用户在输入字段中输入文本时显示列表。当用户从输入字段中删除所有文本时,它会再次隐藏列表。与jQuery中的autocomple或autosuggest相同?我们可以角度实现吗?AngularJS:如何隐藏和显示列表

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <script data-require="[email protected]*" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script> 
    <script data-require="[email protected]" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="myapp"> 
    <div ng-controller="cnt"> 
     <input type="text" ng-model="searchText.category"> 
     <table> 
      <tr ng-repeat= "a in d.obj | filter:searchText"> 
        <td> {{a.name}} </td> 
       <td> {{a.category}} </td> 


      </tr> 
     </table> 

    </div> 
</body> 
<script> 
    var app=angular.module("myapp",[]); 
app.factory('data',function(){ 
    var data={}; 
    data.obj=[ 
     {"name": "Apple", category: "Apple"}, 
     {"name": "bb", category: "Frui"}  , 
     {"name": "df", category: "Apple"} , 
     {"name": "sds", category: "Frui"} 


    ] 


    return data; 
}); 

function cnt($scope,data){ 
    $scope.d=data; 
    // alert('-'+$scope.d.obj) 

} 
</script> 
</html> 

感谢

回答

0

你想避免显示桌上的东西时searchText.category未定义或空:

<table ng-show="searchText.category && searchText.category.length != 0"> 

<table ng-if="searchText.category && searchText.category.length != 0">