I was attempting to create CRUD operations in AngularJS.
Unfortunately, I am facing an issue where my ng-click is not functioning properly.
Below is the code for my list.html:
<div class="container">
<input type="text" ng-controller="Remove">
<ul>
<li ng-repeat="person in people | filter: {age: search}" class="row-{{$first}} | orderBy: 'name'">
{{person.name}} , {{person.age}}
<a ng-click="edit(person.name)">edit</a>
<a ng-click="remove(person.name)">X</a>
<span ng-show="$first">First</span>
<span ng-show="$middle">Middle</span>
<span ng-show="$last">Last</span>
</li>
</ul>
</div>
Here is the content of my app.js file:
angular.module('myApp',['ngRoute'])
.config(function( $routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html',
controller: 'Ctrl'
})
.when('/edit/:id',{
templateUrl: 'edit.html',
controller: 'Edit'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Add'
})
.when('/remove',{
templateUrl: 'remove.html',
controller: 'Remove'
})
.when('/login',{
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
})
.run(function($rootScope){
$rootScope.people =[
{
name: "Johna",
age: 23
},
{
name: "Shamit",
age: 74
},
{
name: "Prath",
age: 20
},
{
name: "Surya",
age: 28
},
{
name: "Hari",
age: 13
}
];
})
.controller('Ctrl',['$scope','$rootScope',function(scope,$rootScope){
scope.addStatus = true;
scope.name = "Rafal";
scope.age = "28";
scope.persons=['Tom', 'Jerry'];
scope.save = function(){
scope.addStatus = true;
scope.person = [];
};
}])
.controller('Edit',['$scope','$rootScope','$routeParams',function(scope,$rootScope,$routeParams){
scope.edit = function(index){
console.log("The first edit");
scope.addStatus = false;
scope.person = $rootScope.people[$routeParams.id];
};
}])
.controller('Add',['$scope','$rootScope',function($scope,$rootScope){
$scope.add = function(){
$rootScope.people.push($scope.person);
console.log($scope.person)
$scope.person ={};
};
}])
.controller('Remove',function($scope,$rootScope){
$scope.people=$rootScope.people;
$scope.remove = function(name){
var index = getSelectedIndex(name);
alert(index)
$rootScope.people.splice(index, 1);
};
})
.controller("LoginCtrl",["$scope",'Auth',function($scope,Auth){
console.log("heyy")
$scope.login = function(){
Auth.signin({
email:$scope.email,
password:$scope.password
})
};
$scope.register = function(){
Auth.signup({
email:$scope.email,
password:$scope.password
})
};
}]);
function getSelectedIndex(name){
for(var i=0;i<$rootScope.people.length;i++)
if($rootScope.people[i].name==name)
console.log(name);
return i;
return -1;
};
I am struggling with triggering ng-click and unable to perform edit and delete functions on the page. Any assistance will be greatly appreciated.