ng-display based on the data model of another element in the HTML page

I am having an issue with a simple Angular Program where the span should only show if the input value is 'Peter'. I expected that changing the input value would make the span disappear, but when I try to change the input box value, it does not allow me to do so. What could be causing this problem in preventing me from changing the input value?

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="text" ng-model="name"/>
    <span ng-show="name='peter'">{{name}}</span>
    <script>
    //module declaration
    var app = angular.module('myApp', []);
    //controller declaration
    app.controller('myCtrl',function($scope){
        $scope.name = "Peter";

    });
    </script> 
</body> 
</html> 

Answer №1

Modify the ng-show directive to:

<span ng-show="name.toLowerCase()==='peter'">{{name}}</span>

The assignment operator should be changed to a comparison operator, and the input value's case needs to be adjusted.

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37565950425b5645195d4477061903190f">[email protected]</a>" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="text" ng-model="name"/>
    <span ng-show="name.toLowerCase()==='peter'">{{name}}</span>
    <script>
    //module declaration
    var app = angular.module('myApp', []);
    //controller declaration
    app.controller('myCtrl',function($scope){
        $scope.name = "Peter";

    });
    </script> 
</body> 

</html>

Answer №2

Give this a try.

<body ng-app="myApp" ng-controller="myCtrl"> 
   <input type="text" ng-model="name">
   <p ng-hide="name!== 'peter'">peter</p>
   <p ng-show="name!== 'peter'"></p>
   <script>
   //module declaration
   var app = angular.module('myApp', []);
   //controller declaration
   app.controller('myCtrl',function($scope){ 

});
</script> 

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

As two divs glide across the screen, the top div remains hidden from view

To enhance our user experience, we are tasked with creating a captivating screen saver featuring 3 images. The bottom image will remain fixed in its position. The middle image should move across the screen. Lastly, the top image will move at a faster ...

Utilizing document.getSelection() for extracting data into an array, similar to how document.getSelection().toString() functions for handling strings

In my Angular JS application, I have a table with filtering functionality. I need to extract only the selected data from the table and store it in an array of arrays called "rows[]" and "cell[]". This makes it challenging to just export the entire table da ...

What is the process for producing multiple objects in JSON format and then accessing them from within <g:javascript> in Grails?

My goal is to add two select boxes within the results div using Ajax. I have a function named ajaxFun that retrieves values for the select boxes. However, I am struggling with rendering multiple objects as JSON and then retrieving them in my JavaScript fun ...

The position of the scroll bar remains consistent as you navigate between different websites

Is it possible for me to click on a link within my HTML website and have the other website load with me in the exact same position? For example, if I'm halfway down a webpage and click a link, can I be taken to that same point on the new page? If so, ...

Managing weekly recurring meetings on the same weekday in the same week of every month

I'm currently struggling with managing monthly recurring meetings in my software. The criteria call for these meetings to consistently take place on the same weekday within the same week of the month, regardless of the specific date. To illustrate, i ...

Has the jQuery plugin object misplaced a variable?

I am in the process of developing a basic plugin using jQuery. My current approach involves creating private functions and storing variables within the jQuery object itself. (function($) { var somePrivateFn = function() { alert(this.x); } ...

How come props do not get updated along with state changes?

I've encountered an issue where the state of a component being passed into another component as a prop is not updating correspondingly. Various attempts have been made to resolve this, including placing it in the return function and updating the "low ...

The function string.charAt() is returning a value of 0

I'm attempting to output each letter of a word separately by using the variable string. Here is the code I have so far: function typewriter() { var el = document.getElementById("typewr"); var string = "Hello"; for(var i=0;i<string.le ...

The splice function in Angular is mistakenly removing a different record instead of the intended one that was

An issue with the Angular splice function is causing it to delete the wrong record. Here is the code snippet in question. Within the code below, when attempting to delete the record labeled "Pat," the code ends up deleting the record labeled "Max." Please ...

Material-UI: Issue with AppBar background color not changing when specifying type as 'dark' in createMuiTheme

When I change the theme by switching the value of theme.palette.type to 'dark', I noticed that all white components switch to a dark color, but not for components like AppBar which have a primary color of #3f51b5 as their default. I assumed that ...

Use either lodash or a for loop to organize a group of JSON objects

Here is the array I am working with: [ { corequisite: "", curriculumYr: "2017-2018", programCode: "ET" majorCode: "AET", prerequisites: "GMRC 101||Math 101" semester: "1st Term", year: "1st Year", subjectCode : "ENG ...

Ensure UseEffect is only triggered once with specific dependencies

Whenever the component is loaded, I have a method called useEffect() that runs once. useEffect(() => { (async function fetchData() { const results = await stateIsoAPI(); setStates(results); // API results to trigger other Use effect ...

How can an array be generated functionally using properties from an array of objects?

Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...

Unknown Parameters Issue with Vue.js Router Links

Within my Vue.js project, I am utilizing params in my navigation.vue component to pass data onto the next page for dynamic routing purposes. Below is an example of how I am using this: <router-link tag="p" :to="{name: 'Main', ...

Retrieving JSON information from the server

I have been working with the knockout.js framework and adapted a basic contacts form example to suit my needs. I am able to successfully store values in my database, but I am encountering difficulties when trying to load values from the server. Despite h ...

Adjusting the layout of tables for an accordion design

I am facing an issue with displaying the accordion in a table layout. When I expand them, the arrangement gets disrupted. To see the table layout for the accordion, you can check it here. <div ng-controller="AccordionDemoCtrl"> <label class="che ...

"Error: React dotenv is unable to access the .env configuration file

My React and Node project has a .env file in the root directory, along with other important files like .eslint and .gitignore. The .env file contains 6 lines of code such as APIKEY=aeofiunoief, without any special symbols. Within the src/ directory, there ...

Tips for dealing with React Native: Extracting items from AsyncStorage for use beyond async functions

I am encountering an issue where I am attempting to utilize an item from AsyncStorage, which is stored as a variable created within an async function. However, upon retrieval, it returns undefined. import React from 'react'; import {View,Text,To ...

Mastering the correct way to access array index positions in Vuejs

HelloWorld.vue <template> <div> <div v-for="(pizza, index) in pizzas" :key="pizza.name"> {{ pizza.name }} <List :content="matchingPizza" :pname="pizza.name" :qname="quantities[index] ? ...

Is there a way to determine the items that will be displayed on this page by clicking a link from a different page?

First Page: Whenever a link is clicked, it will redirect to the second page where only the relevant item will be displayed <ul class="portfolio-filters list-inline"> <li ><a href="page2.html/#webdesign-filter">Web ...