Friday, June 19, 2015

Search Box using AngularJS Filters

Code Snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Search and know about places</title>
    <script src="Scripts/angular.js"></script>
</head>

<body ng-app="">

    <div ng-init="places=['Agartala','Agra','Amritsar','Bangalore','Chennai','Hyderabad','Visakhaptanam','Delhi','Kerala','Tamil Nadu'];">

        <h2>Search and know about places</h2>

        Search:<input type="text" ng-model="serPlace" /><br />
        <table>
            <tr ng-repeat="place in places| filter:serPlace">
                <td>
                    <a ng-show="serPlace" ng-href="https://www.google.co.in/#q={{place}}" target="_blank">{{place}}</a>
                </td>
            </tr>
        </table>

    </div>
</body>
</html>

How it Looks:


No comments:

Post a Comment