Updating the DOM using AngularJS is as easy as pie

Question

Updating the DOM using AngularJS is as easy as pie

My challenge involves having a list of items where the user can click on one, triggering a server request for that item's details. The retrieved values will then populate a div below based on the specific item selected.

This is what my current code looks like:

    <div ng-controller="MarketCtrl">

        Please select a market:

        <?php foreach ($markets as $market): ?>
            <span class="<?= strtolower(str_replace(' ', '_', $market)) ?>"><?= $market ?></span>
        <?php endforeach; ?>

        You have selected _______ as the market.

        <div>
            <!-- Load items based on the item selected above -->
        </div>

    </div>

I am interested in using AngularJS for this task, even though I am currently more familiar with jQuery. How should I approach this problem? Would creating a new directive and binding it to the elements be the best solution? I am still learning AngularJS through various resources but haven't come across a similar scenario yet.

Any guidance on this matter would be greatly appreciated. Thank you.

javascript angularjs angularjs-directive

Answer 1

Answer №1

There are multiple approaches to handle this open-ended scenario where you have a list of markets and their corresponding details. If the data set is small, one efficient way would be to retrieve all the information in a single JSON request and structure your model like this:

 var markets = [{"name":"market1", "detail": {"description":"blah blah"} }]

Incorporate this into your HTML:

<div ng-controller="MarketCtrl">
    Please choose a market:
        <span ng-repeat="market in markets" ng-click="setMarket(market)" ng-class="getClass(market.name)">{{market.name}}</span>

         You have chosen {{curMarket.name}}as the market.
    <div>
         {{curMarket.detail.description}}
    </div>
</div>

For the controller aspect:

MarketCtrl= function($scope){
    $scope.curMarket={};
    $scope.getClass = function(name){
        return name.replace(" ", "_")
    }

    $scope.setMarket(market){
         $scope.curMarket=market;
    }

}

If pulling all the data at once becomes overwhelming:

var markets = [{"name":"market1", "id":1 }, {"name":"market2", "id":2}]

HTML setup:

<div ng-controller="MarketCtrl">
    Please select a market:
        <span ng-repeat="market in markets" ng-click="getMarket(market)" ng-class="getClass(market.name)">{{market.name}}</span>

         You have chosen {{curMarket.name}}as the market.
    <div>
         {{curMarket.detail.description}}
    </div>
</div>

And adjust the controller logic accordingly:

MarketCtrl= function($scope, $http){
    $scope.curMarket={};
    $scope.getClass = function(name){
        return name.replace(" ", "_")
    }

    $scope.getMarket(market){
         var url='';
         $http.get(url).success(function(data){
                $scope.curMarket=data;
         });
    }

}

Answer 2

There are multiple approaches to handle this open-ended scenario where you have a list of markets and their corresponding details. If the data set is small, one efficient way would be to retrieve all the information in a single JSON request and structure your model like this:

 var markets = [{"name":"market1", "detail": {"description":"blah blah"} }]

Incorporate this into your HTML:

<div ng-controller="MarketCtrl">
    Please choose a market:
        <span ng-repeat="market in markets" ng-click="setMarket(market)" ng-class="getClass(market.name)">{{market.name}}</span>

         You have chosen {{curMarket.name}}as the market.
    <div>
         {{curMarket.detail.description}}
    </div>
</div>

For the controller aspect:

MarketCtrl= function($scope){
    $scope.curMarket={};
    $scope.getClass = function(name){
        return name.replace(" ", "_")
    }

    $scope.setMarket(market){
         $scope.curMarket=market;
    }

}

If pulling all the data at once becomes overwhelming:

var markets = [{"name":"market1", "id":1 }, {"name":"market2", "id":2}]

HTML setup:

<div ng-controller="MarketCtrl">
    Please select a market:
        <span ng-repeat="market in markets" ng-click="getMarket(market)" ng-class="getClass(market.name)">{{market.name}}</span>

         You have chosen {{curMarket.name}}as the market.
    <div>
         {{curMarket.detail.description}}
    </div>
</div>

And adjust the controller logic accordingly:

MarketCtrl= function($scope, $http){
    $scope.curMarket={};
    $scope.getClass = function(name){
        return name.replace(" ", "_")
    }

    $scope.getMarket(market){
         var url='';
         $http.get(url).success(function(data){
                $scope.curMarket=data;
         });
    }

}

Updating the DOM using AngularJS is as easy as pie

Answer №1

Similar questions

Directives causing disruption to one another

What is the best way to send multiple input box values to a function set in the controller?

Make sure the "Treat labels as text" option is set to true when creating a chart in a Google spreadsheet using a script

Is it possible for Angular to complete all input validations rather than stopping at the first validation failure?

What is the best way to add controllers to AngularJS?

display a message of achievement within the $http response

How can jQuery determine the amount of line breaks within a div element?

Can Javascript templates help improve server performance compared to PHP templates?

What is the most effective way to communicate to my client that attempting to conceal the browser toolbar is an ill-advised decision?

Discover local points of interest with the Google Places API integration on your WordPress site through PHP programming

Troubleshooting Error: Heroku, mLab, and Node.js - Application Issue with Mongoose

Regular expressions should be utilized in a way that they do not match exactly with a

The character is having trouble displaying correctly in the ajax response

How to display a modal within a router-link in Vue 3?

Tips for incorporating an anchor tag within an img tag in HTML?

After the ajax function has finished executing, establish a socket.io connection

steps to determine if a page is being refreshed

Unveiling the Truth about Svelte Transitions

Retrieve the body's coordinates when dragging an element using the jQuery UI library

updating the page using the latest AJAX function