AngularJS Search Filtering Error: [ng:areq]

Trying to implement a search filter in my AngularJS application, but encountering an error in the Chrome console: Error: [ng:areq]

Below is the code snippet:

<div id="notebooks" ng-controller="NotebookListCtrl">
  <input type="text" id="query" ng-model="query"/>
  <select ng-model="orderList">
    <option value="name">By name</option>
    <option value="-age">Newest</option>
    <option value="age">Oldest</option>
  </select>
  <ul id="notebook_ul">
    <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
      name: {{notebook.name}}<br/>
      processor: {{notebook.processor}}<br/>
      <div class="right top">{{notebook.age}}</div>
    </li>
  </ul>
  <span>Number of notebooks: {{notebooks.length}}</span>
</div>

Here is the link to the Plunker I created: http://plnkr.co/edit/P1DFr3fEuWiYGfC0k7bj?p=preview

Despite everything appearing correct, the error message persists. Any insights into why this error might be occurring would be greatly appreciated.

Answer №1

angular.module("myNotebookApp",["ngAnimate"])
.controller('NotebookController', ['$scope',
  function ($scope) {
    $scope.notebooks = [
      {"brand": "Dell",
       "processor": "AMD Ryzen",
       "year": 2019},
      {"brand": "Apple",
       "processor": "Intel i9",
       "year": 2020},
      {"brand": "HP",
       "processor": "Intel i7",
       "year": 2018},
      {"brand": "Lenovo",
       "processor": "Intel core i5",
       "year": 2017},
      {"brand": "Asus",
       "processor": "AMD Ryzen",
       "year": 2016}
    ];
    $scope.sortBy = "brand";
  }
]);

Answer №2

Correctly define the controller as shown below

latest update : http://plnkr.co/edit/Ojhg4RlEgHbfKvN36jfS?p=preview

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

app.controller('LaptopListCtrl',['$scope',function($scope){
  $scope.laptops = [
    {"brand": "Dell",
     "processor": "Intel i5",
     "year": 2011},
    {"brand": "Apple",
     "processor": "Intel i7",
     "year": 2010},
    {"brand": "HP",
     "processor": "AMD",
     "year": 2008},
    {"brand": "Acer",
     "processor": "Intel core 2 duo",
     "year": 2012}
  ];

  $scope.sortByField = "brand";

}]);

Answer №3

An error has been detected:

The function 'NotebookListCtrl' is not defined, it is showing as undefined

You can locate more information about this error by clicking on this link provided next to [ng:areq] in the browser console.

This error is occurring due to an incorrect definition of the controller. With AngularJS versions after 1.2, the "controller as global function" syntax is no longer supported. You need to include it in your module like shown below:

angular.module("myApp").controller('NotebookListCtrl',NotebookListCtrl);

For minification-safe injection, make sure to add the following line as well:

NotebookListCtrl.$inject = ['$scope'];

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

The emoji lexicon is having trouble locating the modules for .emojis

Currently, I am attempting to utilize the emoji-dictionary in my project, but I am encountering issues with it not running properly. Specifically, I am encountering the index.js:2 Uncaught Error: Cannot find module "./emojis" error message. ...

Guide to changing the checkbox value using JavaScript

Describing the Parent Element: <span style="background: yellow; padding: 50px;" onClick="setCheckBox()"> <span> </span> <input type="checkbox" name="f01" value="100"> </span> ...

Getting the values of several labels using a class name - a comprehensive guide

Is there a way to retrieve the values of labels with the "timeAuction" class? I'm currently working on a JavaScript function that will target each label with the class name timeAuction and adjust its value. The number of labels with this class can va ...

Not quite sure about the best way to showcase the results // using JavaScript

My code is posted below. I am trying to achieve a functionality where, upon clicking the 'Calculate Price' button, the results showing the number of cars, type of cars, and their respective prices are displayed beneath the button. Despite this be ...

Symfony2 compresses CSS and JS files to improve performance

Currently, I am attempting to execute php app/console assetic:dump in order to test my production environment. While my css file gets generated successfully, the js file does not. The following error message is displayed : C:\wamp\www\p ...

Is there a way to send a JSON object and a file to an ASP.NET server using the fetch method?

I'm facing a challenge here, as I attempt to send a json object from my indexedDb along with an IFormFile object to the server at the same time. The method that handles this scenario is structured like so: [HttpPost] public async Task<IActionR ...

The Colorful World of CSS Backgrounds

I've been searching for hours trying to track down the source of this strange greenish background color. I've combed through every single file and it's starting to drive me insane. Any ideas where this color could be coming from? I highly d ...

Toggle the visibility of list elements individually with a click in a React application

I'm currently working on creating a list where clicking on the title will show/hide the description below each individual item. The functionality is partly there (clicking on a title shows all descriptions and clicking again hides them all), but I&apo ...

Correct the spacing around periods, even within separate div elements

I am facing a challenge with a large json file resembling a decision tree, where each node contains a sentence. There are multiple buttons on the page, and each click on a button retrieves a node from the json to populate the HTML. The json structure: { ...

Is there a way to automatically change specific characters as a user types in an input field?

I'm facing an issue with replacing some characters dynamically. The goal is to ensure that user-input text is URL-friendly for constructing a URL: function slugify(string) { const a = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïí ...

Breaking down an array in Node.js

After web scraping, I retrieved an array structured like this: array: [ 'line1', 'line2', 'line3', 'linen'.. ] My task now is to insert this data into a MySQL table. The challenge is that every 10 lines of ...

The getJSON function yields a null value

When using the jQuery getJSON function, I am getting a null response even though everything seems to be written correctly: $.getJSON("/site/ajax/autocomplete/key", function(data) { alert(data); //null alert(data.term); //null }); I am working wit ...

How to integrate XML data from a WCF service into an Angular application

I have a MediaServiceLoop.svc file that contains a function called GetMediaLoops which is structured like this: [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Xml)] public string GetMed ...

Is there a way to make Outlook show only the caption of a link instead of the entire URL?

In my PDF file, I have set up a button for sending an email. The email is a request that needs approval or denial. I want the recipient to respond with just 2 clicks: Click on either "Approve" or "Deny" (a new email will pop up) Click on "send" - and it& ...

What is the best way to use scrollIntoView() to display an additional item at the top or bottom of the visible area

When implementing scrollIntoView() with navigation buttons (up and down), I aim to display two items at a time to signal to the user that there are more items to navigate. However, the first and last items should retain their default behavior so the user u ...

What is the process for changing a JavaScript date to the Hijri format?

Greetings! I am currently working on a web application using AngularJS/JavaScript. In my project, I have implemented a date picker and I am capturing dates from the front end. My goal is to save the selected date in the database in Hijri format. To achieve ...

trouble with fetching data

Within my Backbone view, I have the following code snippet: var BookView = Backbone.View.extend({ initialize: function() { this.render(); }, render: function() { this.model.fetch({ success : function(model, resp, opt) { alert(this.$el. ...

When zooming in on a d3js graph, the number of ticks begins to multiply

I added zoom functionality to a d3 line chart and it was working fine at first. However, after zooming to a certain level, the y-axis ticks started displaying decimal numbers like (3.400000001). I then included the following code: .tickFormat(d3.format(", ...

Iterate through the values of an object and verify their presence in another object

I am working on a function where I need to check if any of the role names, passed in as a string with or without pipe separation, exist within an existing JavaScript array. While .includes works well for single names, it doesn't work perfectly when d ...

Error: The API_URL_KEY variable has not been declared

hardhat.config.js require("@nomicfoundation/hardhat-toolbox"); /** @type import('hardhat/config').HardhatUserConfig */ module.exports = { solidity: "0.8.18", }; /* @type import('hardhat/config').HardhatUserConfig* ...