JSFiddle - React, Tailwind, and code Playground

by alansouzati

HTML

<body ng-controller="pageController" ng-app>
    <div id="wrapper">
        <h1>Find Locations</h1>
        <p>Category:<br/><select id="category" name="category">
                            <option value="associate">associate</option>
                            <option value="contractor">contractor</option>
                            <option value="either" selected="selected">either</option>
                        </select></p>
        <p>Enter zip code:<br/><input type="text" id="zipcode" name="zipcode" size="20"></p>
        <p>Enter radius (mi):<br/><input type="text" id="radius" name="radius" size="20"></p>
        <p><input type="button" id="lookup" value="lookup locations" ng-click="GetListings()"></p>
    </div>
    <div id="content">
        <div id="mainArea">
            <div class="directoryEntry" ng-repeat="listing in listings">
                <h4>{{listing.name}}</h4>
            </div>
        </div>
    </div>
</body>

JavaScript

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

app.controller('LandingPageCtrl',
    function pageController ($scope) {

    $scope.listings =  [ {name : 'a' }, { name : 'b' }, { name : 'c' }, {name : 'd'}];

    $scope.GetListings = function () {

       console.log($scope.listings);

       $scope.listings.push( {name: 'e' } );

    }

});