The function $scope.removeNinja cannot be found

As a beginner in Angular, I encountered an issue while working on a project that involved creating a Directory of ninjas with various functionalities implemented using Angular.

Here is a snippet of my HTML file:

<!DOCTYPE html>
<html lang="en" ng-app="ninjaApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="app\lib\angular.min.js"></script>
<script src="app\app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<div>
<header ng-include="'Header.html'"></header>
<div style="height: 40px;">
    <button class="btn1" ng-click="order = 'name'">Order by Name</button>
    <button class="btn2" ng-click="order = 'belt'">Order by Belt</button>
    <button class="btn3" ng-click="order = 'rate'">Order by Price</button>
    </div>
        <div style="height: 5px;"></div>
    <div ng-controller="ninjaController">
    <input type="text" ng-model="search" placeholder="Search Ninjas">
    <ul class="liststyles" style="padding: 0px !important;">
        <li class="textstyles" ng-repeat ="ninja in ninjas | orderBy : order | filter: search">
            {{ ninja.name }} - {{ ninja.rate | currency }}
            <span class="cancel" ng-click="removeNinja()">x</span>
            <span class="belt" style="background-color: {{ ninja.belt }}">{{ ninja.belt }}</span>
        </li>
        <!-- <div class="line"></div> -->
    </ul>
</div>
</html>

I faced the issue after adding the removeNinjas function. Here's the relevant section from my JS file with controller:

var newApp = angular.module('ninjaApp', []);

newApp.controller('ninjaController', ['$scope', function($scope){

    $scope.removeNinja() = function(ninja){
        var removedNinja = $scope.ninjas.indexOf(ninja);
        $scope.ninjas.splice(removedNinja, 1);
    }

    $scope.ninjas = [
        {name : 'Kevin', belt : 'Red', rate: 100, available: true},
        {name : 'hitler', belt : 'Yellow', rate: 250, available: false},
        {name : 'goku', belt : 'Brown', rate: 450, available: true},
        {name : 'shenron', belt : 'Black', rate: 850, available: false}
    ]
}]);

The intended functionality was for clicking the "x" to remove the selected ninja. However, the console displayed the following error:

angular.min.js:127 TypeError: $scope.removeNinja is not a function

    at Object.<anonymous> (app.js:5)
    at Object.invoke (angular.min.js:45)
    at S.instance (angular.min.js:97)
    at p (angular.min.js:71)
    at g (angular.min.js:64)
    at g (angular.min.js:64)
    at g (angular.min.js:64)
    at g (angular.min.js:64)
    at angular.min.js:64
    at angular.min.js:22
(anonymous) @ angular.min.js:127
(anonymous) @ angular.min.js:99    
$apply @ angular.min.js:155
(anonymous) @ angular.min.js:22
invoke @ angular.min.js:45
c @ angular.min.js:22
Uc @ angular.min.js:22
Ae @ angular.min.js:21
(anonymous) @ angular.min.js:348
b @ angular.min.js:38

Answer №1

Avoid including () in your code, instead use

$scope.removeNinja = function(ninja){

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

Challenges with TypeScript build in DevOps related to Material UI Box Component

Currently, I am facing an issue while trying to build a front end React Typescript application using Material ui in my build pipeline on Azure DevOps. The problem seems to be related to the code for the Material ui library. Despite successfully building th ...

Unable to retrieve the ZIP archive generated dynamically

I am facing an issue while attempting to generate a dynamic output from MySQL queries and create an archive. Below is the code snippet I have been working with: var async = require("async"); var mysql = require("mysql"); var express = require("express"); ...

Customize your markers on Google Maps

I have integrated Markerclusterer with Google Maps in a similar way to the example provided. Here is my code snippet: var map = new google.maps.Map(document.getElementById("map"), options); var markers = []; for (var i = 0; i < 100; i++) { var latLn ...

What is the proper way to utilize a class with conditional export within the Angular app.module?

This query marks the initiation of the narrative for those seeking a deeper understanding. In an attempt to incorporate this class into app.module: import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angul ...

Upon the creation of a new Post and attempting to make edits, the field is found to be blank

<template> <div class="card m-3"> <div class="card-body"> <Form method="post" @submit="submitData" :validation-schema="schema" ref="myForm" v-slot="{ errors, ...

Ways to showcase flair in PHP code such as this

I currently have this code snippet: <h2 class="index-single">Tech Categories</h2><?php $args2 = array( 'cat' => 11 , 'posts_per_page' => 9 , 'paged' => $paged ); $the_query2 = new WP_Query( $args2 ); ...

Tips on conducting a statistical analysis without having to wait for the completion of an AJAX response

I am looking to track the number of clicks on a specific div with the id #counter and then redirect the user to a different website. To achieve this, I have implemented an ajax call on the click event of the #counter div. Upon successful completion of the ...

Tips for preventing a NodeJS script from crashing due to timeout being exceeded

Here is the issue I am encountering: I am attempting to scrape a website's content using NodeJS and puppeteer. Sometimes, my code halts with a Timeout Exceeded error. Is there a way for me to handle this timeout by implementing a function that will e ...

Assign value to twig variable using JavaScript in Symfony version 3.4

Hello everyone, I am currently working on a form that is functioning well. However, I am facing an issue with setting the localization of a place manually using latitude and longitude values. To address this, I decided to create a map with a draggable mark ...

Incorporating Angular to dynamically fetch data through AJAX and fill in content post-page render

As a backend API developer diving into AngularJS (version 1) for the first time with my current project, I have encountered a scenario that requires me to fetch server-side content dynamically post-render. The page is set up with ng-app="app" in the <ht ...

Why is the size of my array shrinking with every iteration of the for-loop in JavaScript?

I am struggling to change the classname of three elements that share the same classname. Unfortunately, as I loop through my array, it seems to decrease in size with each iteration, preventing me from successfully changing all three elements. Any advice or ...

Stopping a file transfer in case of browser closure or upload cancellation

When working on uploading a file asynchronously using HTML5 in MVC3, a common issue arises when dealing with large files such as 1GB. If the upload process is cancelled or the browser is closed at 50% completion, a 500MB file still gets saved in the target ...

Combining two JSON objects in JavaScript is simple when their IDs correspond to each other in both objects

I have a query related to merging two different objects from the database, both in JSON format. These two objects share two key/value pairs: IRBId = ... and id = ..., which can be seen in the examples below: OBJ 1 { "data":{ "IRBs":{ "n ...

Angular JS: Changing Byte Array into an HTML File

I created an HTML file using ASPOSE workbook and stored it in a memory stream in C#. Now, I am trying to show this HTML file in an Angular JS environment within the Div element. C# Snippet: wb.Save(htmlMemoryStream, new HtmlSaveOptions() { IsExportComment ...

RSS feed showing null xml data with jQuery

Working on coding a straightforward RSS feed utilizing jquery and pulling data from Wired. Everything appears to be functioning correctly, except for one issue - after the description, an unknown value of NaN is appearing in the result. It seems to be comi ...

AngularJS: Issue with Directive Scope not triggering $destroy event

After extensive searching through the archives and online for a solution, I have come up empty-handed. There are plenty of suggested posts, but none of them provide the answer I am looking for. I am dealing with a complex directive that uses scope: true. ...

Change the value of the material slide toggle according to the user's response to the JavaScript 'confirm' dialogue

I am currently working on implementing an Angular Material Slide Toggle feature. I want to display a confirmation message if the user tries to switch the toggle from true to false, ensuring they really intend to do this. If the user chooses to cancel, I&ap ...

Is there a way to retrieve the headers from an HTTP response in JavaScript that wasn't initiated by an AJAX request?

I have a login page setup to send an HTTP post request to the server, which then redirects me to another page on the server in the response message. On this new page, I need to access the location header to obtain a specific value for future server tasks. ...

Adding elements to an array in Node.js

In my 'both' object, I need to store 2 arrays: eng and fr. Each of these arrays contains multiple objects. How can I transfer all values from frDisplayData to fr:[] within the 'both' object: const displayData = []; var both = {eng:dis ...

Execute jQuery after Angular has completed its loading process

I'm currently working on making some small adjustments to an existing website. This website was originally created using Angular. While my code is written with jQuery, I do have the flexibility to use any type of JavaScript necessary. Despite this, ...