Question

我做了一个过滤器的演示。它运行正常。现在我需要使用相同的代码或逻辑进行自动完成。我运行项目时，我的列表是全部显示。我需要在用户输入文本时显示列表field。当用户从输入字段中删除所有文本时，它再次隐藏list.as与jquery中的autocomple或autosuggest相同？我们可以实现角度吗？

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" 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>

由于

Answer 1

当searchText.category未定义或为空时，您希望避免显示表：

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

或

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

AngularJS：如何隐藏和显示列表

1 个答案: