I need one help.I need to get all checked data from the table row using Angular.js. I am explaining my code below.
<tr ng-repeat="gl in galleryDatas">
<td><input type="checkbox" name=""> {{$index+1}}</td>
<td><img ng-src="upload/{{gl.image}}" border="0" name="image" style="width:100px; height:100px;" /></td>
<td>{{gl.description}}</td>
</tr>
Here i need while user will clicked the check box the respective row data will retrieving into a array.Please help me.
Use ng-change on the checkbox
<td><input type="checkbox" ng-change="clickedRow(gl.checked)" name="" ng-model="gl.checked"></td>
In controller,
$scope.clickedRow = function(checked) {
if (checked) {
//add to the list
} else {
// remove from list
}
}
you can achieve by this process
in your controller:
$scope.galleryDatas = [
{
name: 'something',
description: "name 1"
},
{
name: 'another',
description: "name 2"
}
];
$scope.checkedValue = [];
$scope.saveInArray = function(index) {
if($scope.galleryDatas[index].checked) {
$scope.checkedValue.push($scope.galleryDatas[index]);
} else {
var newIndex = $scope.checkedValue.map(function(e) { return e.name; }).indexOf($scope.galleryDatas[index].name);
// for compare instead of "name" you should use that field is unique. ie: e.uniqueField
// and $scope.galleryDatas[index].uniqueField
if(newIndex !== -1)
$scope.checkedValue.splice(newIndex,1);
}
};
N.B: where checked row data store in $scope.checkedValue array and when unchecked then removed from $scope.checkedValue array
and Html:
<td><input type="checkbox" ng-model="gl.checked" ng-click="saveInArray($index)"> {{$index+1}}</td>
Related
I have to select drop down list value dynamically for update functionality in my web site. I also go through similar tutorials and stack overflow question-answer.
I work with angularjs v1.4.2, up till now I tried below code.
HTML:
<label for="ddlDesignationDepartment"> Department</label>
<select name="ddlDesignationDepartment" ng-model="designation.DepartmentId"
ng-options="dept.DepartmentId as dept.DepartmentName for dept in departmentList track by dept.DepartmentId" >
</select>
<br/>
<label for="txtDesignationName"> Designation</label>
<input type="text" name="txtDesignationName"
ng-model="designation.DesignationName"
placeholder="Designation name"/>
<br/>
<label for="txtDescription"> Description</label>
<input type="text" name="txtDescription"
ng-model="designation.Description"
placeholder="Desription"/>
<input type="button" value="{{designation.DesignationId>0?'Update':'Insert'}}"
ng-click="ManageDesignation(designation)" />
<table name="tblDesignationResult">
<tbody ng-if="designationList.length>0">
<tr ng-repeat="des in designationList">
<td>
{{$index+1}}
</td>
<td >
{{des.DesignationName}}
</td>
<td>
{{des.Description}}
</td>
<td >
{{des.DepartmentName}}
</td>
<td>
<input type="button" value="Edit" ng-click="EditDesgnation(des)" />
</td>
</tr>
</tbody>
</table>
AngularJs code:
(function () {
'use strict';
///Decalre angular controllar for Designation
angular.module('AngularDemo').controller('DesignationCtrl', ['$scope', '$rootScope', 'DesignationService', 'DepartmentService', DesignationCtrl]);
///Designation controllar
function DesignationCtrl($scope, $rootScope, DesignationService,
DepartmentService) {
///Get or set all Designation
$scope.designationList = [];
///Get or set all Department
$scope.departmentList = [];
///Get or set Designation
$scope.designation = new Designation();
///Retrive all Designation by DesignationService
$scope.GetAllDesignations = function () {
DesignationService.GetAllDesignations().then(function (response) {
if (response && response.data) {
/// Success block
if (response.data.Result) {
$scope.designationList = angular.copy(response.data.Result);
}
else {
alert(response.data.Message);
}
}
});
}
/// Manage Insert / Update / Delete on specific Designation by
///DesignationService
$scope.ManageDesignation = function ( des) {
DesignationService.ManageDesignation(des).then(function (response) {
if (response && response.data) {
/// Success block
if (response.data.Result) {
$scope.departmentList = angular.copy(response.data.Result);
}
else {
alert(response.data.Message);
}
}
});
$scope.Init();
}
///Retrive all Department by DepartmentService
$scope.GetAllDepartments = function () {
DepartmentService.GetAllDepartments().then(function (response) {
if (response && response.data) {
/// Success block
if (response.data.Result) {
$scope.departmentList = angular.copy(response.data.Result);
}
else {
alert(response.data.Message);
}
}
});
}
///Edit Designation
$scope.EditDesgnation = function (des) {
$scope.designation = des;
}
///Inilise Designation controllar
$scope.Init = function () {
$scope.designation = new Designation();
$scope.GetAllDesignations();
$scope.GetAllDepartments();
}
}
})();
///JavaScript Class of Designation
function Designation() {
this.DesignationId = 0;
this.DesignationName='';
this.Description = '';
this.DepartmentId = 0;
}
Designation.prototype = {
constructor: Designation
}
Sample Database
Department{DepartmentId int, DepartmentName varchar(max)}
Designation{DesignationId int,DesignationName varchar(max),Description varchar(max),DepartmentId int}
All services working fine, initially everything is fine all data are display in Result table, Dropdown list was also show all departments. But the problem is when I click on edit for update any record textbox value are filled for specific data but the Department Dropdown list value are not select.
Be careful when using select as and track by in the same expression.
Given this array of items on the $scope:
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
This will work:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];
but this will not work:
<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;
In both examples, the track by expression is applied successfully to each item in the items array. Because the selected option has been set programmatically in the controller, the track by expression is also applied to the ngModel value. In the first example, the ngModel value is items[0] and the track by expression evaluates to items[0].id with no issue. In the second example, the ngModel value is items[0].subItem and the track by expression evaluates to items[0].subItem.id (which is undefined). As a result, the model value is not matched against any and the appears as having no selected value
so in your case as well change this
ng-options="dept.DepartmentId as dept.DepartmentName for dept in departmentList track by dept.DepartmentId
to
ng-options="dept as dept.DepartmentName for dept in departmentList track by dept.DepartmentId
since dept[0].DepartmentId.id do not exists
I have a table that has a checkbox. It has a select ALL javascript function and a select one by one function. My html file looks like this for the delete button:
<button data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="countChecked() == 0">Delete</span></button>
Select All Checkbox:
<th class="">
<input type="checkbox" name="select" id="checkAll" ng-model="selectAllRawSCP"/>
</th>
table details:
<tr ng-repeat=" item in rawSCAP | orderBy:sort">
<td>
<input type="checkbox" name="select" value="checked" ng-model="item.checked"/>
</td>
I used the code I saw in one of the answers here in stack overflow to disable the delete button if there is no checkbox checked. It looks like this:
$scope.countChecked = function(){
var count = 0;
angular.forEach($scope.rawSCAP, function(value){
if (value.checked) count++;
});
return count;
}
But using this, my page returns an error which isTypeError: Cannot read property 'checked' of null
And also I need to enable delete button even if I used select all
The error is pretty clear, it cannot access the property checked of the rawSCAP itens. You have to guarantee rawSCAP itens checked property is not null before you try to use it in ng-model.
You could try to initialize it before with some value you want. Check this on how to do it.
There are some conditions you need to follow to use the <<ng-model>>.checked, which is a plain array can't be used for checkbox, it must be an array of objects. Also please change your function to below.
$scope.countChecked = function() {
var count = 0;
angular.forEach($scope.rawSCAP, function(value) {
value.checked = value.checked || 0;
if (value.checked) count++;
});
return count;
}
The main line which does the work is value.checked = value.checked || 0; Here if the value.checked is undefined, then the 0 will get assigned to value.checked, hence you won't get the error!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.rawSCAP = [{
item: 1
}, {
item: 2
}, {
item: 3
}, {
item: 4
}, {
item: 5
}, {
item: 6
}, {
item: 7
}];
$scope.countChecked = function() {
var count = 0;
angular.forEach($scope.rawSCAP, function(value) {
value.checked = value.checked || 0;
if (value.checked) count++;
});
return count;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<button data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="countChecked() == 0">Delete</button>
<table>
<th class="">
<input type="checkbox" name="select" id="checkAll" ng-model="selectAllRawSCP" />
</th>
<tr ng-repeat=" item in rawSCAP | orderBy:sort">
<td>
<input type="checkbox" name="select" value="checked" ng-model="item.checked" />{{item.item}}
</td>
</tr>
</table>
</div>
I am taking data from table and display as multi check checkboxes.My checkboxes when checked pushes data on array for that particular checkbox.But when unchecked ,the respective data should be removed from the array.How can I achieve this?
HTML:
<div ng-repeat="data in filters.status" >
<label class="Form-label--tick">
<input type="checkbox" value="data.id" id="status" ng-model="status" class="Form-label-checkbox" ng-change="IfCheck(data.id,status)" >
<span class="Form-label-text"> {{data.status}}</span>
</label>
</div>
Javascript:
<script>
$scope.IfCheck = function (data, check) {
if (check) {
status.push(data);
$scope.checkedData[0].status = status;
}
else {
var index = $scope.status.indexOf(data);
$scope.status.splice(index);
}
};
</script>
This can be written as like this:
var app = angular.module('sa', []);
app.controller('FooCtrl', function($scope) {
$scope.ids = [];
$scope.filters = [{
id: 1,
status: false
}, {
id: 2,
status: false
}, {
id: 3,
status: false
}]
$scope.IfCheck = function(id, check) {
if (check) {
$scope.ids.push(id);
} else {
var index = $scope.ids.indexOf(id);
$scope.ids.splice(index, 1);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sa" ng-controller="FooCtrl">
<div ng-repeat="data in filters">
<label class="Form-label--tick">
<input type="checkbox" value="data.id" id="status" ng-model="data.status" class="Form-label-checkbox" ng-change="IfCheck(data.id, data.status)">
<span class="Form-label-text"> {{data.status}}</span>
</label>
</div>
Selected ids: {{ids}}
</div>
You can utilize the ng-model to see if the input is checked or unchecked. Note that I simplified the code, so you will need to add in your various attributes and logic to what's below:
HTML:
<input type="checkbox" ng-model="isChecked" ng-change="IfCheck()">
JS:
$scope.isChecked = false;
$scope.IfCheck = function () {
if ($scope.isChecked === true) {
// checked
} else {
// unchecked
}
};
This is the example plnkr for a checkbox input with ng-model that is on the Angular documentation.
For multiple checkboxes, you will need to track something like isChecked for each checkbox.
I am trying to get the id values of a table row of the checkbox that had been checked, but for some reason. is not returning an array of objects my current script:
console.log(array_checks); returns what I need: an array of objects and makes the script work well. But if I un-comment .closest('tr').attr('id'), it doesn't return anymore the array of objects, it returns a string with the first checked table row id. Where am I mistaking
HTML
<tr id="row_132" class="even">
<td>
<input id="52" class="checkbox-dash" type="checkbox" value="52" name="delete-dash[]">
</td>
</tr>
<tr id="row_91" class="even">
<td>
<input id="54" class="checkbox-dash" type="checkbox" value="54" name="delete-dash[]">
</td>
</tr>
Jquery
var array_checks = $('.checkbox-dash:checked')/*.closest('tr').attr('id')*/;
console.log(array_checks);
if (array_checks.length) {
// Getting values of the table row id of checked checkboxes
var array_values = array_checks.map(function(){
return this.value;
}).get();
} else {
var array_values = 0;
$('#message').html('Please select at least one row in order to delete.').show(700);
}
$.ajax({
type: 'post',
url: '../lib/ajax.html',
data: {
action: 'delete_sites_history',
user_id: user_id,
array_values: array_values
},
beforeSend: function() {
$("#result").html('Loading...');
},
complete: function(data) {
$("#result").html('');
$.each(array_values, function(index, rows) {
console.log(rows);
$('#row_'+rows).fadeOut(1000);
});
},
error: function() {
$("#result").html('There was an error');
}
});
EXPECTED OUTPUT
console.log(array_checks); - need to return of array of objects (row_132, row_91)
Object[
tr#row_132.checkbox-dash attribute value = "132",
tr#row_91.checkbox-dash attribute value = "91"
]
You can use the has: selector:
$('tr:has(.checkbox-dash:checked)')
To get all the ids, you cannot use attr however, since that returns the value of the first node in the set only, but you can do something like:
var ids = $('tr:has(.checkbox-dash:checked)').map(function () {
return this.id;
}).get();
I am trying to add the delete function for the option list:
But always getting the error message: indexOf is undefined!
Could someone help me on that? Thanks in advance!
Here is part of my code:
Html:
<div class="question_typeList" ng-switch-default>
<table class="question_heading">
<tbody>
<tr ng-repeat="option in question.options">
<td>
<input class="question_textfield" placeholder="My Option" ng-model="option.value[lang]">
<button ng-click="removeOption(option)">X</button>
</td>
<td>
{{option.value}}
</td>
</tr>
</tbody>
{{question.options}}
</table>
<button ng-click="newOption(question)">Add Options</button>
</div>
js part:
$scope.questions = [
{
title: $scope.newTranslatable("Title"),
description: $scope.newTranslatable("Mr./Mrs./Ms."),
type: "list",
options: [
{
value: $scope.newTranslatable("Mr")
}, {
value: $scope.newTranslatable("Mrs")
}, {
value: $scope.newTranslatable("Ms")
}
]
}
$scope.removeOption = function(option) {
var index = $scope.questions.options.indexOf(option);
if(index != -1) {
$scope.questions.options.splice(index, 1);
}
}
$scope.questions is defined as an array. options is not a property of the array, but a property of an element of the array.
you'll have to iterate through the $scope.questions array. This raises a new problem because as far as I can tell, your questions array doesn't appear to have a «key» field to compare against.
Still, assuming you'll manage to get an unique field in there, this is how I think you could implement a function to remove a question[x].options option:
$scope.removeOption = function(uniqueKey,option) {
var questionIndex = $scope.questions.yourUniqueKeyField.indexOf(uniqueKey);
if(questionIndex != -1){
var optionIndex = $scope.questions[questionIndex].options.indexOf(option);
if(optionIndex != -1) {
$scope.questions[questionIndex].options[optionIndex].splice(optionIndex,1);
}
}
}