Is it possible to declare a variable without assigning a value to it immediately and instead assign a value later

Question

Is it possible to declare a variable without assigning a value to it immediately and instead assign a value later

I am facing an issue with assigning a value to a variable in my controller when a button is clicked. Here is the code snippet:

var app = angular.module('myApp', ['ngRoute']);    

....

var userArray = [
    {name: "John", age: 25}, {name: "Jim", age: 30}
];

app.controller('Page2Controller', function($scope) {
    $scope.message = 'Look! I am from page 2.';
    $scope.newArray = [];

    $scope.addUsers = function(){
        scope.newArray = userArray;

        console.log($scope.newArray);
    }  
}

app.config(function($routeProvider) {
    $routeProvider

    .when('/page2', {
       templateUrl : 'pages/page2.html',
       controller  : 'Page2Controller'

   ...

page2.html

<div>
     <p>{{ message }}</p>

     <ul>
         <li ng-repeat="user in Page2Controller.newArray">{{user.name}}</li>
     </ul>
</div>

index.html

<body ng-controller="MainController">
    <div id="sideMenu">
        <h2>Campaign</h2>

        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#page2">Page 2</a></li>
            <li><a href="#page3">Page 3</a></li>
            <li><a href="#page4">Page 4</a></li>
        </ul>
    </div>

    <div ng-view></div>
</body>

I'm confused as to why the $scope.user appears in the console but the "ng-repeat" doesn't display the users on the HTML page. Could it be that ng-repeat can't display data added dynamically?

Any assistance would be greatly appreciated.

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

Looks like that function was never called.

let app = angular.module('myApp', []);    
let userArray = [{name: "Sarah", age: 28}, {name: "Emily", age: 33}];
app.controller('Page3Controller', function($scope) {
    $scope.message = 'Hello from page 3.';
    // $scope.newArray = [];
    $scope.addUsers = function(){
        $scope.newArray = userArray;
        console.log($scope.newArray);
    }  
    $scope.addUsers();
});

Here's the HTML:

<div ng-controller="Page3Controller">
                         <p>{{ message }}</p>

                         <ul>
                             <li ng-repeat="user in newArray">{{user.name}}</li>
                         </ul>
                    </div>

I directly used your controller as I didn't set up ngRoute yet.

Answer 2

Looks like that function was never called.

let app = angular.module('myApp', []);    
let userArray = [{name: "Sarah", age: 28}, {name: "Emily", age: 33}];
app.controller('Page3Controller', function($scope) {
    $scope.message = 'Hello from page 3.';
    // $scope.newArray = [];
    $scope.addUsers = function(){
        $scope.newArray = userArray;
        console.log($scope.newArray);
    }  
    $scope.addUsers();
});

Here's the HTML:

<div ng-controller="Page3Controller">
                         <p>{{ message }}</p>

                         <ul>
                             <li ng-repeat="user in newArray">{{user.name}}</li>
                         </ul>
                    </div>

I directly used your controller as I didn't set up ngRoute yet.

Answer 3

Answer №2

Consider changing to:

<li ng-repeat="person in scope.userArray">{{person.name}}</li>

It seems that 'Page2Controller' is not recognized in the template context.

Answer 4

Consider changing to:

<li ng-repeat="person in scope.userArray">{{person.name}}</li>

It seems that 'Page2Controller' is not recognized in the template context.

Answer 5

Answer №3

To start, you will need an ng-click directive to trigger a function when clicked:

<button type="button" ng-click="asigningValue()"></button>

Next, in your Controller, define the function and assign the desired value:

app.controller('Page2Controller', function($scope) {
$scope.asigningValue = function() {
     $scope.message = 'Hello from page 2!';
  } 
}

Finally, display the assigned value using data binding in the directive:

<p ng-bind-html="message"></p>

I hope this explanation is useful!

Many thanks!

Answer 6

To start, you will need an ng-click directive to trigger a function when clicked:

<button type="button" ng-click="asigningValue()"></button>

Next, in your Controller, define the function and assign the desired value:

app.controller('Page2Controller', function($scope) {
$scope.asigningValue = function() {
     $scope.message = 'Hello from page 2!';
  } 
}

Finally, display the assigned value using data binding in the directive:

<p ng-bind-html="message"></p>

I hope this explanation is useful!

Many thanks!

Is it possible to declare a variable without assigning a value to it immediately and instead assign a value later

Answer №1

Answer №2

Answer №3

Similar questions

Is $resource causing $update to not be recognized as a function?

Elements with absolute positioning are preventing drag events from executing

Combining $var positions within a PHP loop

Display an element with JSX using the .map() method only when a specific property of the source object is not null

The collapsible list feature that includes the use of plus and minus signs is malfunctioning

Tips for repairing damaged HTML in React employ are:- Identify the issues

Looking to dynamically generate HTML tags using jQuery and JSON?

Splitting AngularJS Controllers Into Individual Files

Saving a screenshot in a custom directory using Javascript Selenium

Having trouble retrieving a value from a .JSON file (likely related to a path issue)

Mongoose does not support sorting with plain objects

Executing the Javascript function specified above upon the page being loaded

Why isn't the CSS class being applied to the checkbox element?

Utilizing a dropdown selection to trigger an IF statement in a function

Issue: Wed Nov 06 2019 19:50:56 GMT+0500 (Uzbekistan Standard Time) cannot be used as a React child

Can someone guide me on the process of assigning multiple classes in my situation?

What makes JSON in string form a legitimate string?

Karma Jasmine: No executions and no errors detected

Expand the following number into its expanded form

What is the best way to display a div box only when a user checks a checkbox for the first time out of a group of checkboxes, which could be 7 or more, and then hide the