String includes another String not refreshing automatically

Question

String includes another String not refreshing automatically

How come myCtrl.greeting doesn't automatically update when I change myCtrl.name?

angular.module('MyApp', [])
    .controller('MainController', [function(){
        var mCtrl = this;
        mCtrl.name = '';
        mCtrl.greeting = 'Greetings ' + mCtrl.name;
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MainController as mCtrl">
    <input type="text" ng-model="mCtrl.name">
    <h3 ng-bind="mCtrl.greeting"></h3>
</div>

I assumed that updating the mCtrl.name property would trigger a $digest loop and update mCtrl.greeting in the view?

javascript angularjs

Answer 1

Answer №1

The reason for this issue is not related to angular, but it actually stems from JavaScript. When you assign the value of name to your greeting string, a copy of the value of name is made, not a reference. This means that even if the value of name changes, the value of greeting remains the same. Here's a simple example to explain:

var a = 'Foo';
var b = a + 'bar'; //b = 'Foobar', there is no reference to a
b == 'Foobar'; //This is true

a = 'Lalelu';
b != 'Lalelubar'; //b is still 'Foobar'

To achieve the desired behavior, create an expression in your template like this:

<h3>Greetings {{mCtrl.name}}</h3>

This approach works well. Give it a try below.

angular.module('MyApp', [])
    .controller('MainController', [function(){
        var mCtrl = this;
        mCtrl.name = '';
        mCtrl.greeting = 'Greetings ' + mCtrl.name;
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MainController as mCtrl">
    <input type="text" ng-model="mCtrl.name">
    <h3>Greetings {{mCtrl.name}}</h3>
</div>

Answer 2

The reason for this issue is not related to angular, but it actually stems from JavaScript. When you assign the value of name to your greeting string, a copy of the value of name is made, not a reference. This means that even if the value of name changes, the value of greeting remains the same. Here's a simple example to explain:

var a = 'Foo';
var b = a + 'bar'; //b = 'Foobar', there is no reference to a
b == 'Foobar'; //This is true

a = 'Lalelu';
b != 'Lalelubar'; //b is still 'Foobar'

To achieve the desired behavior, create an expression in your template like this:

<h3>Greetings {{mCtrl.name}}</h3>

This approach works well. Give it a try below.

angular.module('MyApp', [])
    .controller('MainController', [function(){
        var mCtrl = this;
        mCtrl.name = '';
        mCtrl.greeting = 'Greetings ' + mCtrl.name;
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MainController as mCtrl">
    <input type="text" ng-model="mCtrl.name">
    <h3>Greetings {{mCtrl.name}}</h3>
</div>

String includes another String not refreshing automatically

Answer №1

Similar questions

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

Secure Flask API used for serving JSON files to a basic HTML, JavaScript, and CSS web application

What steps can be taken to enhance the functionality of this?

Creating a factory class in Typescript that incorporates advanced logic

Capture JavaScript results using PHP

extract the key identifier from the JSON reply

Postponing the loading of a controller until the model is fully loaded without relying on routes

The sequence for conducting operations within a function in JavaScript (Vue.js)

Can an element on a webpage be dynamically assigned an ID using JavaScript or PHP?

The issue with NGX-Bootstrap/Angular Pagination arises when attempting to adjust the maxSize input while the screen view (width) is being altered

One of the great features of Next.js is its ability to easily change

Tips for converting file byte code to file form data

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

The installation of robotjs via npm failed due to issues encountered while trying to build the binaries

shifting the length of o to the right by zero with the

Get the page downloaded before displaying or animating the content

Encountered a Puppeteer Protocol issue: Error occurred when attempting to call a function on a closed

Mastering the art of reading rows in ASP.NET using Java Script

Troubleshooting Transclusion Problems in Angular

Posting a string using AJAX to the Java backend through JavaScript