Troubleshooting issues with Angular's scope functionality

Here is my controller:

angular.module('app', [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.daysPerMonth = new Date(year, month).getDate();
}]
);

This is the corresponding html:

<div ng-app>

  <h1>Calculate days in a month</h1>

  <input ng-model="month" type="text" placeholder="Enter month as number">

  <input ng-model="year" type="text" placeholder="Enter year as number">

  <p ng-if="year" ng-model="daysPerMonth">
    In {{ month }} of {{ year }}, there are {{ daysPerMonth }} days.
  </p>

</div>

Can anyone help me figure out why it's not functioning correctly?

https://jsfiddle.net/m7aLdwe1/

Answer №1

Don't forget to include ng-controller and ng-app in your code. I have corrected your mistakes for you.

var app = angular.module('app', []);
app.controller('ctrl',['$scope', function ($scope) {
      
      // Update the logic to calculate...
      
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <h1>How many days are in a month?</h1>
  
  <input ng-model="month" type="text" placeholder="Enter a month as a number">
  
  <input ng-model="year" type="text" placeholder="Enter a year as a number">
  
  <p ng-if="year" >
    In {{ month }} of {{ year }} ........
  </p>
  
</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

Can PHP send back data to AJAX using variables, possibly in an array format?

My goal is to transmit a datastring via AJAX to a PHP page, receive variables back, and have jQuery populate different elements with those variables. I envision being able to achieve this by simply writing: $('.elemA').html($variableA); $('. ...

Angular's watch feature fails to trigger when the value is modified

My setup includes two sliders, one for brightness and the other for contrast. They are linked to a "brightness" model and a "contrast" model. These sliders are located within a tab interface, and I noticed that every time the tab was changed, the values we ...

The web API PUT method is able to process query strings, however it is not properly

When I use users as a query string parameter and set the web API method to look for them in the URI, everything works fine. However, when I pass them in as shown below, the users variable ends up being null. What could be causing this issue? Angular funct ...

Example of Angular JS using controller functionality

Currently, I am immersing myself in the Angular JS documentation. Within this documentation, there is an example that has caught my attention: // exploring controller describe('MyController', function() { var $httpBackend, $rootScope, ...

Display a limited number of characters along with a button on the blog tag pages. Clicking on the button will reveal the complete text description

Hey, I am looking to replicate the way WooCommerce tags descriptions are displayed on my WordPress blog. I want it to show only a certain number of characters with a "show all" link, similar to how it appears on this site: I have found some code that work ...

JS: The for loop will keep iterating even if the condition becomes false

Can anyone help me understand why my for loop is continuing even after the conditions are met? Unfortunately I can't share the entire file due to its size, but here is a snippet of the loops: for (var j = 0; j < depKeyArr.length; j++) { var di ...

One URL serving dual purposes with HTML and JSON responses

Are there any guidelines or best practices for using the same URL to serve both HTML and JSON responses? For instance, in the scenario where I'm creating a blog and have a URL that displays the latest items, such as /latest. I want to use this URL fo ...

Error: Node.js exceeds maximum call stack size while inspecting an objectlogging or debugging

After defining a class as shown below, I encountered an error stating RangeError: Maximum call stack size exceeded when attempting to review the properties of the Object. var Individual = (function () { function Individual(name, age) { this.na ...

What could possibly be causing my MongoDB collection to return an empty object?

I've been attempting to retrieve all the data from my "users" collection, but all I keep getting is undefined. Within my directory and file labeled leaderboard/lb.js, and indeed, my database goes by the name of collections: const mongoose = require( ...

Link a distinctive number to a specific element

I am searching for a method to link a DOM element with a distinct number that is not assigned to any other element in the DOM. Using an Id attribute is not an option as not all elements possess such an identifier. One potential approach is to obtain a num ...

Is there a way to enable scanned data to be automatically inputted into a field without manual entry?

I am in the process of creating a user-friendly Android app for virtual inventory management. I want the application to streamline data input by automatically populating text fields upon scanning, eliminating the need for users to manually click on each fi ...

What is causing the consistent error message "unable to read property 'logged' of undefined"?

Here is the code snippet from my app.js: var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie- ...

Expanding and collapsing multiple tables in Material-UI

I'm currently working on creating a collapsible table using MaterialUI. At the moment, all my slides have collapses but they are connected to one state for "open", so when I open one slide, all the other slides also open. Here is an example sandbox t ...

"Upon submission, 404 error message is displayed indicating resource not

Recently, I delved into using MEAN Stack to develop a simple application as a beginner. After setting up my controllers, I encountered an issue when trying to post - it kept returning 'api/user not found'. Can someone help me identify the problem ...

Unexpected behavior: Promise.catch() fails to catch exception in AngularJS unit test

During the process of writing Jasmine unit tests for my Typescript app and running them via Resharper, I encountered an issue with executing an action when the handler throws an exception: describe("Q Service Test", () => { var q: ng.IQService; ...

The ng-repeat directive in the view is only updating when the entire array is fetched from the database

The issue of the angular directive ng-repeat not updating correctly appears to be quite common, with several existing threads discussing the problem. However, I have encountered a situation where it works in some cases but not in others, which is quite unu ...

When a base html tag is dynamically added, the browser mistakenly loads assets twice

When managing relative paths on a website, I utilize the <base> tag within the <head> section of each page. Although all resources loaded via relative-like paths in the documents are displayed correctly, my observations show that browsers such ...

Using React's higher order component (HOC) in TypeScript may trigger warnings when transitioning from non-TypeScript environments

I have a simple HOC component implemented in React with TypeScript. export const withFirebase = <P extends object>( Component: React.ComponentType<P> ) => class WithFirebase extends React.Component<P> { render() { return ...

Instant access to an interactive online platform

Is it feasible to create a shortcut from a webpage to my desktop for quick access? For instance, if a dynamic web page has 15 documents and I want to easily create shortcuts to them on my desktop by clicking on each one. I understand this is a brief quest ...

Exploring the differences between a callback function and an asynchronous

In the code snippet below, I have implemented handling for SIGINT and SIGTERM signals in a node.js application. // quit on ctrl+c when running docker in terminal process.on('SIGINT', async () => { console.info('Got SIGINT (aka ctrl+c in ...