Initializing ng-app with a specific name will prevent the initialization of variables

Here is the code snippet I am working with:

<div ng-app="" ng-init="show_login=false;count=0">
<button> ng-click="show_login=!show_login;count=count+1">INSPIRE</button>
<form ng-show="show_login">
     Username <input type="text"> <br>
     Password <input type="password">
      <p> {{count}} </p> 
</form>
</div>

Everything works perfectly as expected, but when I add a name to the ng-app module, suddenly the form stops functioning.

<div ng-app="demo" ng-init="show_login=false;count=0">
<button> ng-click="show_login=!show_login;count=count+1">INSPIRE</button>
<form ng-show="show_login">
     Username <input type ="text"> <br>
     Password <input type = "password">
      <p> {{count}} </p> 
</form>
</div>

Does this mean that if a module name is provided, all manipulations and variable initializations must be done through controllers or have I misunderstood something?

Answer №1

Here is a solution that should work for you. Configure the module as shown below:

angular.module("demo", []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-init="show_login=false;count=0">
<button ng-click="show_login=!show_login;count=count+1">INSPIRE</button>
<form ng-show= "show_login">
     Username <input  type ="text"> 
     <br />
     Password <input type = "password">
      <p> {{count}} </p> 
</form>
</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

JavaScript alerts

Can anyone recommend a quality library with beautifully animated popups? Specifically, I need a popup that allows for basic HTML fields such as text areas and more.... I am in search of a popup that will overlay on the current page, rather than opening a ...

Error: Webpack encountering reference errors when handling multiple entry points

Here is my setup in webpack.config.js: entry: { a:'./src/a.js', b:'./src/b.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].bundle.js' } The content of a.js includes: const ...

What is the best way to import a file in meteor version 1.3?

Trying to incorporate react-datepicker into a meteor 1.3 and react project has been quite successful so far. The only issue I am facing is the inability to access any of the css styles from the package. According to the readme, I'm supposed to requir ...

Challenge encountered while creating a child tag that can be assigned to multiple parent tags

I have an xml format like the one provided. <xml> <parent id="0"> <child type="name"> </child> <child type="age"> </child> </parent> <parent id="1"> <ch ...

The menu field remains open even after clicking on the menu

I have encountered an issue with my code. Here is a DEMO that I created on jsfiddle.net Currently, when you click on the red div, the menu opens. However, if you click on the menu items, the menu area does not close. What do I need to do in order to clo ...

Creating a unique theme in the MEAN stack

I'm brand new to the world of MEAN and I'm diving in head first by creating a new website using this exciting technology stack. To kick things off, I've created a package in MEAN by running the command mean package <package_name>. In ...

Retrieve the JavaScript object that was initialized within a function

As I venture into the world of working with javascript objects and php objects, I've encountered an issue. While everything seems to be functioning correctly so far, I'm having trouble accessing the javascript object created in the ajax success r ...

What could be causing the code to not wait for the listener to finish its execution?

I've been attempting to make sure that the listener has processed all messages before proceeding with console.log("Done") using await, but it doesn't seem to be working. What could I possibly be overlooking? const f = async (leftPaneRow ...

Capture the Promise Rejection

During my test with WebdriverIO, I consistently encounter an issue specifically with this line of code: await browser.waitForVisible('#tx-sent li', 15000) Intermittently, a Promise rejection error occurs: Error: Promise was rejected with the ...

Creating a dynamic menu structure by tailoring it to the specific elements found on each page

Currently, I am facing issues while attempting to generate a dynamic menu based on the elements present on the page. Is there a way to develop a menu using the following code structure?: <div class="parent"> <div class="one child" id="first"& ...

Troubleshooting JavaScript Date Problem with Internet Explorer 7

When I retrieve a Date from a web method, it comes in the format of "Mon Sep 30 07:26:14 EDT 2013". However, when I try to format this date in my JavaScript code like this: var d= SomeDate.format("MM/dd/yyyy hh:mm:ss tt"); //Somedate is coming from the we ...

Use ng-repeat to display data in two separate rows

<tr ng-repeat=x in y> {{X. row data}} </tr> displaying first-row-data at index 0, then showing partial data from second row at index 1 followed by remaining data at index 1 Is it possible to achieve this format? Such as displaying rep ...

Create a custom BoxGeometry with curved edges using Three.JS

Looking to create a curved BoxGeometry in Three.Js, but unsure of how to achieve it. The end result should resemble the image shown here: enter image description here My current code is as follows, however, it does not produce the desired curved effect. ...

Requesting data with Ajax: utilizing parameters in the format of x-www-form-urlencoded

When adding parameters to a get/post request, it is important to encode them in application/x-www-form-urlencoded form. Is it necessary to encode values each time? Does JavaScript provide a method for encoding values? What options are available for caching ...

The server is currently pointing towards my local C drive directory instead of the desired message location

My goal is to create a functionality where, upon clicking the calculate button (without performing any calculations yet), the user will be redirected to a new screen displaying a response message that says "Thanks for posting that!". However, instead of th ...

Is there a more efficient method for iterating through this object?

Working with JSON and JS var data = { "countries": { "europe" : [{name: "England", abbr: "en"}, {name: "Spain", abbr: "es"}], "americas" : [{name: "United States"}], "asia" : [{name: "China"}] } }; JavaScript Loop for (k in data) { fo ...

ngPrime table column selection and data extraction

I am looking to extract multiple columns from a table. Can anyone suggest the best approach for this? Does NGPrime offer any functionality for achieving this task? Appreciate your help! ...

Angular's parent div height can be adjusted using CSS transitions

I have implemented a CSS transition to create a sliding effect in my pagination. However, I am facing an issue where the height of the containing div changes even when I set the position of the transitioned elements. Here is a snippet of my CSS: .slide { ...

Tips for activating a click event on a changing element within a Vue.js application

I am working on creating dynamically generated tabs with a specific range of time (from 8am to 9am). My goal is to automatically trigger a click event when the current time falls within this range. However, I am facing an issue where the ref is being ident ...

Update the PHP webpage dynamically by utilizing AJAX and displaying the PHP variable

I am working on a PHP page that includes multiple queries, and I would like to be able to include this page in my index.php file and display the results with an automatic refresh similar to the Stack Overflow inbox feature. Is there a way to achieve this ...