JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dynamicAPP">
    <div ng-controller="dynamicController">
        <div ng-repeat="param in filterParamDisplay">
            <input type="text" ng-model="searchParams[param.param]" placeholder="{{param.displayName}}" /> <i class="fa fa-times" ng-click="resetSearchField(param)" ng-show="showParam(param)"></i>
        </div>{{searchParams}}</div>
</div>

JavaScript

angular.module("dynamicAPP", [])
    .controller("dynamicController", function ($scope) {
    $scope.filterParamDisplay = [{
        param: 'userName',
        displayName: 'User Name'
    }, {
        param: 'userEmail',
        displayName: 'User Email'
    }];
    $scope.searchParams = {};
    $scope.resetSearchField = function (data) {
         console.log('show data : ' + data);
    };
    $scope.showParam = function (data) {
        console.log('show data : ' + data);
    };
});