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

Sending HTML parameters to a PHP file

Utilizing a shared service for multiple JSON datasets in AngularJS: A beginner's guide

Using jQuery functions to disable adding or removing classes with a click event

Can you recommend any open source projects with exceptionally well-written Jasmine or Jasmine-Jquery tests?

JavaScript data manipulation: Determining percentage change within a nested JSON structure

Strategies for including JavaScript variables in AJAX data

The JSON response is returning an undefined value

Await the reply from Angular while using Selenium WebDriver

Fetch information that was transmitted through an ajax post submission

What could be causing the issue of this JQuery dropdown plugin not functioning properly on multiple dropdowns?

Trouble with the display:none attribute in Firefox and Chrome

How can I use a button created with jQuery's .html() method to conceal a <div>?

Fetch the information, insert following, and trigger a slide toggle

The UI-SELECT feature in angular-js does not seem to be displaying

How can you retrieve the current user in express.js when incorporating socket.io?

JavaScript - Issue with For Loop when Finding Symmetric Difference

Module Augmentation for extending Material UI theme is not functioning as expected

Executing certain test suites with defined capabilities in Protractor

Performing mathematical computations through a mixin without relying on inline javascript code

Auto-collapse sidebar upon clicking anywhere on the page