如何添加输入标签通过点击即时搜索在HTML(AngularJS)

问题描述:

我是Angular JS的新手,并尝试通过点击从使用Angular JS的即时搜索添加输入标签。如何添加输入标签通过点击即时搜索在HTML(AngularJS)

我找到了来自Google的instant searchdemo的示例,并且从链接中我想通过点击即时搜索栏来输入标签。

如何让它如下图所示?

enter image description here

在此先感谢。

[<body ng-app="myApp" ng-controller="myCtrl"> 
    <table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>Person Name</th> 
     </tr> 
     <tr> 
     <td> 
      <input type="text" ng-model="search.name" placeholder="Search Name..."> 
     </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="listdata in names|filter:search"> 
     <td>{{listdata.name}}</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 

var c=angular.module('myApp',[]); 

c.controller("myCtrl",function($scope){ 

    $scope.names = [ 
    {name: 'Krishnaiah'}, 
    {name: 'Ramana'}, 
     {name: 'ALex'}, 
     {name: 'Remo'}, 
     {name: 'Alena'}, 
    ] 
}) 

https://plnkr.co/edit/5Tb4aaHQn2eim3caTLyE?p=preview