Dealing with AngularJS variables that are undefined when attempting to refresh the view from the controller

Question

Dealing with AngularJS variables that are undefined when attempting to refresh the view from the controller

I am currently learning AngularJS and attempting to transform my webpage using the "angular way" instead of relying on jQuery. However, I am facing some challenges in understanding how to achieve this.

This is how my HTML looks:

<body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill">
    <section id="intro" class="main style1 dark">

        <!-- Header -->            
        <header ng-controller="MainController" id="header">

            <!-- Logo -->
            <h1 id="logo">Summer Mill</h1>

            <a ng-mouseover="locations()"
                style="color:black;text-decoration:initial;"
                id="logoii"
                href="http://localhost/locations">Locations</a>

            <!-- Nav -->
            <nav id="nav">
                <ul class="nav navbar-nav">
                    <li ng-repeat="headerLink in headerLinks"><a ng-init="content=headerLink.text" href="#{{content}}">{{content}}</a></li>
                </ul>
            </nav>
        </header>

Below is my controller script:

app.controller('MainController', ['$scope', function($scope) {
    $scope.headerLinks = [ 
        { 
            text: 'Intro', 
            alternativeText: 'Arlington'
        },
        { 
            text: 'Wholesale', 
            alternativeText: 'New York'
        }
    ];

    $scope.locations = function() {
        content = headerLinks.alternativeText;
    }
}]);

Essentially, I want the content inside the <li> element to change when hovered over. While the hover event is triggered correctly, I receive an error stating ReferenceError: headerLinks is not defined. This seems strange as it is declared in the controller itself. I attempted to resolve this by changing

content = $scope.headerLinks.alternativeText;

, which removed the error but it appears that the content variable in the controller is different from the content variable used in ng-init.

Could you guide me on the correct approach to accomplish this task? It's possible that I may be approaching this problem the wrong way.

javascript angularjs angularjs-ng-repeat angularjs-ng-init

Answer 1

Answer №1

To improve your code, consider simplifying it by using ng-if and a flag called isOver.

angular.module('app',[])
       .controller('MainController',function($scope){
  
   $scope.headerLinks = [ 
        { 
            text: 'Intro', 
            alternativeText: 'Arlington'
        },
        { 
            text: 'Wholesale', 
            alternativeText: 'New York'
        }
    ];
$scope.locations = function() {
    content = headerLinks.alternativeText;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->            
<header ng-app="app" ng-controller="MainController" id="header">

        <!-- Logo -->
  
        <h1 id="logo">Summer Mill</h1>
        <a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
                style="color:black;text-decoration:initial;"
                id="logoii"
                href="http://localhost/locations">Locations</a>

        <!-- Nav -->
                <nav id="nav">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="headerLink in headerLinks">
                          <a ng-if="!isOver" href="#{{headerLink.text}}">{{headerLink.text}}</a>
                          <a ng-if="isOver" href="#{{headerLink.alternativeText}}">{{headerLink.alternativeText}}</a>
                      </li>
                    </ul>
                </nav>

</header>

You can also use a ternary operator instead of ng-if like this:

angular.module('app',[])
       .controller('MainController',function($scope){
  
   $scope.headerLinks = [ 
        { 
            text: 'Intro', 
            alternativeText: 'Arlington'
        },
        { 
            text: 'Wholesale', 
            alternativeText: 'New York'
        }
    ];
$scope.locations = function() {
    content = headerLinks.alternativeText;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->            
<header ng-app="app" ng-controller="MainController" id="header">

        <!-- Logo -->
  
        <h1 id="logo">Summer Mill</h1>
        <a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
                style="color:black;text-decoration:initial;"
                id="logoii"
                href="http://localhost/locations">Locations</a>

        <!-- Nav -->
                <nav id="nav">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="headerLink in headerLinks">
                          <a href="#{{!isOver ? headerLink.text : headerLink.alternativeText}}">{{!isOver ? headerLink.text : headerLink.alternativeText}}</a>
                      </li>
                    </ul>
                </nav>

</header>

Alternatively, you can simplify the code even further:

angular.module('app', [])
  .controller('MainController', function($scope) {

    $scope.currentText = 'text';
    $scope.headerLinks = [{
      text: 'Intro',
      alternativeText: 'Arlington'
    }, {
      text: 'Wholesale',
      alternativeText: 'New York'
    }];
    $scope.locations = function() {
      content = headerLinks.alternativeText;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">

  <!-- Logo -->

  <h1 id="logo">Summer Mill</h1>
  <a ng-mouseover="currentText='alternativeText'" ng-mouseout="currentText='text'" style="color:black;text-decoration:initial;" id="logoii" href="http://localhost/locations">Locations</a>

  <!-- Nav -->
  <nav id="nav">
    <ul class="nav navbar-nav">
      <li ng-repeat="headerLink in headerLinks">
        <a href="#{{headerLink[currentText]}}">{{headerLink[currentText]}}</a>
      </li>
    </ul>
  </nav>

</header>

Answer 2

To improve your code, consider simplifying it by using ng-if and a flag called isOver.

angular.module('app',[])
       .controller('MainController',function($scope){
  
   $scope.headerLinks = [ 
        { 
            text: 'Intro', 
            alternativeText: 'Arlington'
        },
        { 
            text: 'Wholesale', 
            alternativeText: 'New York'
        }
    ];
$scope.locations = function() {
    content = headerLinks.alternativeText;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->            
<header ng-app="app" ng-controller="MainController" id="header">

        <!-- Logo -->
  
        <h1 id="logo">Summer Mill</h1>
        <a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
                style="color:black;text-decoration:initial;"
                id="logoii"
                href="http://localhost/locations">Locations</a>

        <!-- Nav -->
                <nav id="nav">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="headerLink in headerLinks">
                          <a ng-if="!isOver" href="#{{headerLink.text}}">{{headerLink.text}}</a>
                          <a ng-if="isOver" href="#{{headerLink.alternativeText}}">{{headerLink.alternativeText}}</a>
                      </li>
                    </ul>
                </nav>

</header>

You can also use a ternary operator instead of ng-if like this:

angular.module('app',[])
       .controller('MainController',function($scope){
  
   $scope.headerLinks = [ 
        { 
            text: 'Intro', 
            alternativeText: 'Arlington'
        },
        { 
            text: 'Wholesale', 
            alternativeText: 'New York'
        }
    ];
$scope.locations = function() {
    content = headerLinks.alternativeText;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->            
<header ng-app="app" ng-controller="MainController" id="header">

        <!-- Logo -->
  
        <h1 id="logo">Summer Mill</h1>
        <a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
                style="color:black;text-decoration:initial;"
                id="logoii"
                href="http://localhost/locations">Locations</a>

        <!-- Nav -->
                <nav id="nav">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="headerLink in headerLinks">
                          <a href="#{{!isOver ? headerLink.text : headerLink.alternativeText}}">{{!isOver ? headerLink.text : headerLink.alternativeText}}</a>
                      </li>
                    </ul>
                </nav>

</header>

Alternatively, you can simplify the code even further:

angular.module('app', [])
  .controller('MainController', function($scope) {

    $scope.currentText = 'text';
    $scope.headerLinks = [{
      text: 'Intro',
      alternativeText: 'Arlington'
    }, {
      text: 'Wholesale',
      alternativeText: 'New York'
    }];
    $scope.locations = function() {
      content = headerLinks.alternativeText;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">

  <!-- Logo -->

  <h1 id="logo">Summer Mill</h1>
  <a ng-mouseover="currentText='alternativeText'" ng-mouseout="currentText='text'" style="color:black;text-decoration:initial;" id="logoii" href="http://localhost/locations">Locations</a>

  <!-- Nav -->
  <nav id="nav">
    <ul class="nav navbar-nav">
      <li ng-repeat="headerLink in headerLinks">
        <a href="#{{headerLink[currentText]}}">{{headerLink[currentText]}}</a>
      </li>
    </ul>
  </nav>

</header>

Dealing with AngularJS variables that are undefined when attempting to refresh the view from the controller

Answer №1

Similar questions

How to insert a JSON object into a nested array using JavaScript

Implementing non-blocking asynchronous object return in a node.js function

Decreasing the height of a div that wraps a slider

Apply a different class to a group of elements when hovering over them, excluding the element being hovered on

The pdf generation feature of pdf-creator-node in Linux seems to be malfunctioning

emulate clicking on a child component element within the parent component's test file

Is there a way to upload a file using express/multer without triggering a redirect?

Sending a function return to a React component

Optimize your React application by eliminating debug code before deploying it to production

Transforming intricate JSON data into a structured table format

The login controller fails to retrieve any values upon submission

Guide on accessing the text content within a div element in HTML by triggering a button click

What is the best way to duplicate a text using a button in ReactJS?

The router.push function does not properly redirect to the specified path; instead, it just reloads the current page

Unable to retrieve scope data in controller function

The CSS property overflow:hidden or overflow:scroll is not functioning as expected when applied to a

Guide to saving output to a file using node.js and express

Determine whether the elements in the master array match the elements in the child array

Is there a way to programmatically select an HTML tab or filter in puppeteer?

Creating an AJAX URL in an external JavaScript file within a Django project