Illustrative demonstration of AngularJS

One way to showcase data using AngularJS is by triggering a function with a button click. Here's an example:

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<script>
function Display($scope){
    $scope.show_date = function(){
        $scope.show=new Date();
    }       
}   
 </script>
</head>
<body  ng-controller="Display">
<button ng-click="show_date()">Show date!</button>
<div ng-message="required"> {{show}} </div>
</body>
</html>

What mistakes can you find in this code snippet?

Answer №1

If you are using an angular version above 1.3, please note that global controller function declarations are no longer supported starting from this version.

To resolve this issue, update your controller as shown below:

var myApp = angular.module("myModule", []);
 myApp.controller("Display", function ($scope) 
 {
    $scope.show_date = function(){
    $scope.show=new Date();
  }     
 );

Check out the DEMO here!

Answer №2

Just a couple of things to do:

Start by defining an instance of your app module like this:

angular.module('app', [])

Next, register your controller with this app module:

.controller('DisplayCtrl', DisplayCtrl);

Don't forget to click on Run code snippet to see your code in action.

function DisplayCtrl($scope){
    $scope.show_date = function(){
        $scope.show=new Date();
    }       
}   

angular.module('app', [])
    .controller('DisplayCtrl', DisplayCtrl);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="DisplayCtrl">
  <button ng-click="show_date()">Show date!</button>
  <div ng-message="required"> {{show}} </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for passing a JavaScript variable to a PHP MySQL database

I am attempting to integrate a JavaScript variable into PHP MySQL, but I'm encountering issues with the insertion. Currently, it is being inserted as <javascript>document.write(window.outerWidth); </javascript> x <javascript>document ...

Changing synchronous functions to asynchronous

Attempting to transform synchronous calls into asynchronous ones using when...done. Despite being new at this, after extensive reading on the topic for the past two days, my code should work as intended. However, while it does function, it doesn't exe ...

Using Angular ng-model with Bootstrap Modal is problematic when attempting to use it multiple times

Imagine you have a table with 10 lists of operators, each with an edit button. When you click on the edit button for operator 1, the modal pops up and displays the operator data in the input field as expected. However, when you close the modal and try to e ...

Searching for a streamlined approach to sending out numerous HTTP requests in a node.js environment

I'm new to the world of JS/node.js after working with .Net. I have an existing Web API host that I want to stress test with different payloads. I am aware of load testing tools available for this purpose, but my focus right now is on finding an effic ...

How can I store a value or text to track view counts or a counter efficiently?

Recently, I've been trying to implement a view counter on my website, similar to what you see on YouTube. Currently, the number of views stands at 23. I managed to find some code that allows me to increment the view count every time I click on an imag ...

Invalid file format for product images in Magento version 1.9.0.1

Every time I try to upload an image in the product option, Magento 1.9.0.1 gives me an error saying "Disallowed file format." ...

Click on link after animation has finished

I'm currently facing an issue with my script not functioning correctly. The code I'm utilizing is from a resource provided by Codyhouse to implement a 3D rotating navigation menu on my webpage. Essentially, when you click the hamburger icon, it o ...

Adding a new element with Jquery when a dropdown option is selected

What is causing this issue to not function properly? <script> $(document).ready(function(){ $('#custom_field option').click(function(){ $('#custom_field_input').append('<tr><td></td> ...

Utilizing HTML injection to access both the Chrome API and global variables

I am currently developing a new Chrome Extension and am diving into the process for the first time. My extension involves injecting an HTML sidebar into web pages, adding JavaScript functions to the header, and allowing users to interact with buttons on th ...

Stop hyperlinks from automatically opening in a new tab or window

I'm having trouble with my website links opening in new tabs. Even after changing the attributes to _self, it still doesn't work. Can someone please review my code below and provide a solution? Feel free to ask for more clarification if needed. ...

What is the best way to iterate through two arrays and display the common elements as buttons?

I have a list of keywords and a collection of objects. Each object in the collection has a title that may match one or more keywords from the list. I am trying to loop through all the objects, check for keyword matches, and return the titles of the objects ...

What are the capabilities of Ajax when it comes to utilizing select controls in J

Is there a way to trigger an ajax call when a select control value is clicked? The onChange event doesn't seem to work for me in this case :( This is what I have tried so far: JAVASCRIPT: <script> function swapContent(cv) { $("#myDiv"). ...

Create geometric shapes on Google Maps version 2

Can anyone guide me on how to draw a polygon on Google Maps with user-input coordinates? I have two input fields for latitude and longitude, and when the user clicks the button, I want the polygon to be drawn. The code I currently have doesn't seem to ...

Using Bootstrap multiselect, you can easily control the display of a second menu based on the selection in the first menu

On my website, I am working with two menus. When I select Abon from the first menu, it should display all li elements under the Abon optgroup (Abon-1, Abon-2). If I uncheck block in the second menu, those elements should disappear. The code consists of Sel ...

Stop allowing the entry of zero after a minus sign

One of the features on our platform allows users to input a number that will be automatically converted to have a negative sign. However, we want to ensure that users are unable to manually add a negative sign themselves. We need to find a solution to pre ...

Placing a cookie using nookies within the Next.js API directory

I'm currently facing an issue while trying to use the nookies npm package to set a cookie within the Next.js api folder. I've successfully set up a cookie using the same code with nookies before, but for some reason, it's not working in this ...

Customize your popover content with Bootstrap settings

I've been on a quest to dynamically update the content of a Bootstrap popover using JavaScript, but unfortunately, the methods I've tried so far haven't worked out as expected : <!--object with the popover--> <input id="popoverlist ...

The typescript MenuProvider for react-native-popup-menu offers a range of IntrinsicAttributes

Looking to implement drop-down options within a Flatlist component, I've utilized the React Native Popup Menu and declared MenuProvider as the entry point in App.tsx. Encountering the following error: Error: Type '{ children: Element[]; }' ...

Displaying the information from a nested array of objects in an HTML table through iteration

In the code snippet below, there is an input with a nested array of objects. The main array of objects is called summary and within it, there's a nested array called run_type. let input = { "summary": [ { " ...

Protractor functions perfectly on localhost, but encounters a Timeout error when used remotely - the asynchronous callback was not executed within the specified timeout period

Running protractor protractor.conf.js --baseUrl=http://localhost:4200/ executes successfully by filling data, validating elements, etc. However, when attempting to test the same website through a remote URL protractor protractor.conf.js --baseUrl=http://t ...