ng-click is not working - angularjs

I'm stuck with this problem for 2 days and I couldn't locate its core so any help on the matter is really appreciated.
I was creating a form that was inline editable with xeditable and the edit(save/cancel) buttons were working as expected but the DELETE button is not calling the given method from the controller. I tried placing it on other parts in the code both as a button and a link and ng-click was not working both ways! I'm quite new at Angular so any debugging tips on how to solve this kinds of problems are welcome! Thanks in advance!
Here is the code from the app file:
var app = angular.module('app', ["Controllers", "xeditable"])
app.run(function (editableOptions) {
editableOptions.theme = 'bs3';
});
Here is the code for the controller (in different .js file from app.js)
angular.module("Controllers", [])
.controller("controller", ["$scope", "$http", function ($scope, $http) {
$scope.users= {};
//get display data
$http.get("/User/All").success(function (data) {
$scope.users= data;
});
//form methods
$scope.editUser = function (data, id) {
edit_data.UserID = id;
$http.post("/User/Edit", edit_data).success(function () {
angular.extend(data, { id: id });
});
};
$scope.deleteUser = function (index, id) {
$http.post("/User/Delete", id).success(function() {
$scope.users.splice(index, 1);
});
};
}]);
Here is the code from the form:
<container ng-app="app" ng-controller="controller">
<table class="table">
<tr>
<th>
Name
</th>
<th>
Surname
</th>
<th></th>
</tr>
<tr ng-repeat="user in users">
<td>
<span editable-text="user.Name" e-name="Name" e-form="rowform" e-required>
{{user.Name}}
</span>
</td>
<td>
<span editable-text="user.Surname" e-name="Surname" e-form="rowform" e-required>
{{user.Surname}}
</span>
</td>
<td style="white-space: nowrap">
<form editable-form name="rowform" onbeforesave="editUser($data, user.UserID)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button type="button" class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button type="button" class="btn btn-danger" ng-click="deleteUser($index,user.UserID)">delete</button>
</div>
</td>
</tr>

Related

AngularJs disabled directive not updated on ng-click but after refreshing it will work fine

When i click on Book button , buttons should be disabled if status is booked but is not updated or disabled directive not updated ,but when i refresh the page then it works fine and button is updated
$scope.bookingData = function(){
$http.post('myUrl',$scope.myRequiredParameters).
then(function(response){
$scope.datas = response.data.data;//here i am getting my data successfully
});
}
$scope.booked = function(){
$http.post('myUrl',$scope.myRequiredParameters).
then(function(response){
$scope.bookingData = response.data.data;//here also i am getting my data successfully
$scope.bookingData();//here i am calling again bookingData function to update status in
});
}
<tr ng-repeat="data in datas" >
<td >
<input type="button" class="btn btn-danger"
value="Cancel" ng-click="cancelled()" ng-disabled="data.status =='BOOKED' " >
<input type="button" class="btn btn-success"
value="Book" ng-click="booked()" ng-disabled="data.status ='BOOKED' ">
</td>
<td>
<span class="col-md-2 col-xs-12 no-padding text-left-xs" >User Name. :- <b>{{data.name}}</b> </span>
<span class="col-md-3 col-xs-12 no-padding text-left-xs">Name :-<b>{{data.status}}</b> </span>
</td>
</tr>

Pass table data into a method in angular

Here is my code:
<body ng-app="intranet_App" ng-controller="myCtrl">
<div class="container">
<div class="modal" id="deleteProject">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
Are you sure do you want to delete this project??
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk" ng-click="deleteProject(x.Id)">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 margin20 padding table-responsive">
<table class="col-xs-12 table table-hover table-bordered" id="projectList">
<thead class="colorBlue">
<tr><th>Project Name</th><th>Client</th><th>Client Co-ordinator</th><th>Action</th></tr>
</thead>
<tbody id="projectListTBody" >
<tr ng-repeat="x in projectList | filter:ProjectName">
<td>{{ x.ProjectName}}</td>
<td>{{ x.Client}}</td>
<td>{{ x.OnsiteCoordinator}}</td>
<td>
<i class="fa fa-user-plus fa-2x" ng-click="addResource()"></i>
<i class="fa fa-edit fa-2x" ng-click="editProj(x.Id)"></i>
<i class="fa fa-trash fa-2x" data-toggle="modal" data-target="#deleteProject"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var app = angular
.module("intranet_App", [])
.controller("myCtrl", function ($scope, $http) {
$scope.projDetails = [];
$http.post('/Project/getProjectsList')
.then(function (response) {
console.log(response)
$scope.projectList = response.data;
})
$scope.deleteProject = function (id) {
alert(id)
}
});
</script>
Here when I click delete icon in a table, I am displaying one bootstrap popup modal.In that modal I need to pass x.Id inside deleteProject method on the on click on ok button.But I am unable to hit the method,how to pass it?
In HTML code, add ng-click to delete button
<i class="fa fa-trash fa-2x" data-toggle="modal" data-target="#deleteProject" ng-click="delete(x.id)"></i>
In controller add following method
$scope.delete = function (id) {
$scope.deleteId = id;
}
Using that in deleteProject method
$scope.deleteProject = function () {
//use $scope.deleteId here
alert($scope.deleteId);
}
You're trying to access the x var outside of the ng-repeat in which it is defined it, so naturally, it won't know what x is. This is why you're getting undefined.
Here's the quickest solution I could come up with, there should be a better way, though:
<i class="fa fa-trash fa-2x"
data-toggle="modal"
data-target="#deleteProject"
ng-click="current = x"></i>
Which will assign the last clicked x into current. Then, you should refer to current inside the modal:
<button type="button"
class="btn btn-default"
id="confirmOk"
ng-click="deleteProject(current.Id)">
Ok
</button>

Uncaught TypeError: Cannot read property 'file' of undefined(…)

I am trying to upload an image from my html an on click of save button, i am calling an upload function in the controller. When i enter the upload function in controller, i am not able to access $scope to check the $scope.file.name.
//upload image.html
<div class="horizontal">
<table border=1 frame=void rules=rows class="ui celled table" >
<thead style="text-align: center;">
<tr>
<th> Id </th>
<th> Question </th>
<th> Option A </th>
<th> Option B </th>
<th> Option C </th>
<th> Option D </th>
<th> Answer </th>
<th> Section id </th>
<th> Image </th>
<th> Edit</th>
</tr></thead>
<tbody ng-repeat="ques in questionObj | filter: searchText" style="text-align: center;">
<tr>
<td>{{$index + 1}}</td>
<td><span ng-show="editEnabled" ng-model="Title">
{{ ques.Title || 'empty' }}
</span>
<div ng-hide="editEnabled">
<textarea ng-model="ques.Title"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_a || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_a"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_b || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_b"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_c || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_c"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_d || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_d"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Answer || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Answer"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Section_id || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<input type="text" ng-model="ques.Section_id"></input>
</div>
</td>
<td>
<span ng-if="ques.Image != 'nil'" ng-show="editEnabled" ng-model="Title"> <img ng-src="{{ques.Image}}" class="image-container" /></span>
<span ng-if="ques.Image === 'nil'" ng-show="editEnabled" ng-model="Title">No Image</span>
<div ng-if="ques.Image != 'nil'" ng-hide="editEnabled" class="option">
<img ng-src="{{ques.Image}} " class="image-container" />
</div>
<div ng-if="ques.Image === 'nil'" ng-hide="editEnabled" class="option">
<input class="bottom-marg-15" type="file" name="file" file onchange="angular.element(this).scope().imageLoad(this)"></input>
<!-- Progress Bar -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ uploadProgress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ uploadProgress }}%;">
{{ uploadProgress == 0 ? '' : uploadProgress + '%' }}
</div>
</div>
<div ng-repeat="step in stepsModel">
<img class="small-thumb" ng-src="{{step}}" />
</div>
</div>
</td>
<td style="white-space: nowrap">
<div class="buttons" ng-show="editEnabled" ng-show="editEnabled">
<button class="btn btn-primary" ng-click="editEnabled = !editEnabled">edit</button>
<button class="btn btn-danger" ng-click="question.removeUser($index,ques.Id)">del</button>
</div>
<div ng-hide="editEnabled" class="form-buttons form-inline">
<button ng-model="Title" ng-disabled="editQuestionForm.$waiting" ng-click=" upload(); editEnabled = !editEnabled" class="btn btn-primary">
save
</button>
<button type="button" ng-click="editEnabled = !editEnabled" class="btn btn-default">
cancel
</button>
</div>
</td>
</tr>
</tbody>
this is the controller which has the upload function. I am not able to access $scope inside upload function.
'use strict';
angular.module('onlineTestAngularApp')
.controller('editQuestionCtrl', function($scope, GetQuestionsService, $window, $location, localStorageService, ENV) {
var vm = this;
vm.success = false;
vm.auth_token = localStorageService.get('rec-auth-token');
vm.role = localStorageService.get('role');
$scope.editEnabled = true;
$scope.access_key = ENV.access_key;
$scope.secret_key = ENV.secret_key;
$scope.bucket = "q-auth/angular_test/";
$scope.stepsModel = [];
$scope.imageLoad = function(element){
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
}
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
$scope.stepsModel.push(e.target.result);
});
}
$scope.upload = function($scope){
console.log("inside upload");
}
});
Your upload() is having a parameter called $scope, remove it.
Change:
$scope.upload = function($scope){
console.log("inside upload");
}
To:
$scope.upload = function(){
console.log("inside upload");
};
Because when you call the function upload() it will expect to pass an argument, $scope in the function is taken as local variable of that function, hence becoming undefined.
Once you enter the controller's function you have access to its $scope. There's no need to pass it as a parameter:
Controller
$scope.upload = function() {
console.log($scope.stepsModel) // or any other property
}
It seems you mix two techniques for accessing controller's scope: vm and $scope. My advice is to use vm only for exposing the controller variables to the view. Using $scope will soon be deprecated and I use it mainly for $watching changes in the view.

Angular CRUD delete row from modal

I am using a simple CRUD API in MEAN STACK with a delete function
app.delete('/api/users/:user_id', function(req, res) {
users.remove({
_id : req.params.user_id
}, function(err, user) {
if (err)
res.send(err);
users.find(function(err, users) {
if (err)
res.send(err)
res.json(users);
});
});
});
The controller
var app = angular.module('usersList', []);
app.controller('usersController', function($scope, $http) {
$http.get('/api/users')
.success(function(userData) {
$scope.users = userData;
$scope.length = userData.length;
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.deleteUser = function(id) {
$http.delete('/api/users/' + id)
.success(function(data) {
$scope.users = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
});
In the HTML file I populate a table as follow with a btn to open modal with corresponding user details by getting the {{$index}}
<body data-ng-controller="usersController">
<table>
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Login</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="userData in users" >
<td><input type="checkbox"/></td>
<td>{{ userData._id }}</td>
<td>{{ userData.id_userLogin }}</td>
<td>{{ userData.email }}</td>
<td>
<!-- Button trigger for Delete modal -->
<button type="button" data-toggle="modal" data-target="#deleteModal{{$index}}" data-ng-click="Clear()">
<span class="glyphicon glyphicon-trash"></span>
</button>
<!-- Delete Modal -->
<div class="modal fade" id="deleteModal{{$index}}" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Delete <strong>{{ userData.id_userLogin }}</strong> account</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" role="alert">Are you sure you want to delete this account?</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" data-ng-click="deleteUser(user._id)">Delete</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
How can I use the API to delete the corresponding user from the modal as following does not work
<button type="button" class="btn btn-danger" data-ng-click="deleteUser(user._id)">Delete</button>
It is important that the modal is not a confirm delete popup but a modal with content from where the delete button will delete the corresponding user. Any help would be appreciated.
Seem like the problem is solved. I'll just post the answer here. The html of the button should be:
<button type="button" class="btn btn-danger" data-ng-click="deleteUser(userData._id)">Delete</button>
<!-- Use userData._id instead of user._id-->

Angularjs xeditable - Save without edit

I am using angular x-editable to edit html table inline. The problem is I need to give the users option to save whatever data is in the table without putting it in edit mode. If I do that, then my scope value is getting wiped out in onaftersave method.
But if I first put the form in edit mode, and then hit save, everything works fine.
Here is the JSFiddle showing the problem: http://jsfiddle.net/0yvhd84o/
HTML:
<div ng-app="app" ng-controller="Ctrl" style="margin: 50px">
<form editable-form name="tableform" onaftersave="saveTable()">
<table class='table table-bordered'>
<tr style="font-weight: bold">
<td>Name</td>
</tr>
<tr>
<td>
<span editable-text="user.name" e-form="tableform" onaftersave="saveTable()">
{{ user.name || 'empty' }}
</span>
</td>
</tr>
</table>
<div class="btn-edit">
<button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">
edit
</button>
<button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
</div>
<div class="btn-form" ng-show="tableform.$visible">
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
</div>
</form>
<br><br>
<div class="row">
Result is: {{result}}
</div>
</div>
AngularJS
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope, $filter) {
$scope.user = {
name: 'awesome user',
status: 2
};
$scope.saveTable = function(){
$scope.result = $scope.user.name ;
}
$scope.result = '';
});
Is there a way to achieve this, so that users should not have to enter edit mode if they dont have to make any changes
I was able to figure this out. Here is the solution in case someone else needs it:
You need to add ng-click="tableform.$show()" to save button as well
<button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary" ng-click="tableform.$show()">save</button>
Working Example: http://jsfiddle.net/9eg11s0o/

Resources