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