I previously asked a related question:
Checkbox and ng-change. Need to uncheck if condition exists
This is fine for one checkbox but now I have a list:
<tr ng-repeat="part in partstoorder">
<td>
<input type="checkbox"
ng-change="change(ordered, $index, part)"
ng-true-value="1"
ng-false-value="0"
ng-model="ordered"
ng-checked="checkedStatus"
name="part-ordered" />
</td>
</tr>
JS:
$scope.change = function(value, part_index, part) {
var part_id = part.id,
vehicle_id = part.vehicle_id,
ordered_from_val = part.ordered_from;
if (modal_hidden_event) {
$scope.checkedStatus = false;
}
}
How would I go about only unchecking the current checkbox?
try this:
<tr ng-repeat="part in partstoorder">
<td>
<input type="checkbox"
ng-change="change(ordered, $index, part)"
ng-true-value="1"
ng-false-value="0"
ng-model="part.ordered"
ng-checked="part.checkedStatus"
name="part-ordered" />
</td>
</tr>
here part is a variable that You can use to access to items in ng-repeat.
Simply use an array
<tr ng-repeat="part in partstoorder">
<td>
<input type="checkbox"
ng-change="change(ordered, $index, part)"
ng-true-value="1"
ng-false-value="0"
ng-model="ordered"
ng-checked="checkedStatus[$index] = true"
name="part-ordered" />
</td>
</tr>
JS
$scope.checkedStatus = [];
$scope.change = function(value, part_index, part) {
var part_id = part.id,
vehicle_id = part.vehicle_id,
ordered_from_val = part.ordered_from;
if (modal_hidden_event) {
$scope.checkedStatus[part_index] = false;
}
}
Related
When I add any data I am getting values in text box instead of getting it in span.And also after the data gets added I am getting done button instead of getting Update button.Find my full code here:https://jsfiddle.net/GowthamG/jL5oza04/
Is there any error?
<script type="text/javascript">
var app=angular.module("mainapp",[]);
app.controller('mycontrol',function($scope){
$scope.filters=[];
$scope.add=function(filter){
$scope.filters.push(filter);
$scope.filter={};
};
$scope.update = function (index) {
$scope.editing = $scope.filters.indexOf(index);
};
<table border="2">
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>Fees</td>
<td>E-Course</td>
</tr>
<tr ng-repeat="filter in filters track by $index">
<td><span ng-hide="update">{{filter.fname}}</span>
<input type="text" ng-show="update" ng-model="filter.fname">
</td>
<td><span ng-hide="update">{{filter.lname}}</span>
<input type="text" ng-show="update" ng-model="filter.lname">
</td>
<td><span ng-hide="update">{{filter.ffees}}</span>
<input type="number" ng-show="update" ng-model="filter.ffees">
</td>
<td><span ng-hide="update">{{filter.eroll}}</span>
<input type="text" ng-show="update" ng-model="filter.eroll">
</td>
<td>
<button ng-hide="update" ng-click="update = true; update($index)">Update</button>
<button ng-show="update" ng-click="update = false">Done</button>
</td>
<td>
<button ng-click="remove($index)">Remove</button>
</td>
</tr>
</table>
You have to initialize the value of $scope.update in your add functionality to hide the inputs. Now the values will be shown in a span with update button.
$scope.add=function(filter){
$scope.filters.push(filter);
$scope.update=false;
};
Working Demo: https://jsfiddle.net/kz8uLg10/2/
First, have a look at my current code:
$scope.disableParticipant = function (memberObj) {
if($scope.memberObj.membertype==1){
return true;
} else if($scope.memberObj.membertype==2 && $scope.program.updatePermission){
return true;
}
return false;
};
<table>
<tbody>
<tr ng-repeat="memberObj in members | orderBy : ['membername'] as resultMem track by memberObj.id">
<td align="middle" title="Add/Remove Participant" class="width40">
<input type="checkbox" ng-disabled="disableParticipant(memberObj)">
</td>
<td>
<$ memberObj.membername $>
</td>
<td>
<input type="checkbox" ng-disabled="(disableParticipant(memberObj) && (program.created_by == memberObj.id))">
</td>
<td>
<input type="checkbox" ng-disabled="(disableParticipant(memberObj) && (program.created_by == memberObj.id))">
</td>
<td>
<input type="checkbox" ng-disabled="(disableParticipant(memberObj) && (program.created_by == memberObj.id))">
</td>
<td>
<input type="checkbox" ng-disabled="(disableParticipant(memberObj) && (program.created_by == memberObj.id))">
</td>
</tr>
</tbody>
</table>
Here I have used 'disableParticipant' function many times. I am searching any way where I do not need to use the function again & again. I supposed that aliasing with the very first use of function should work but it is not working.
<input type="checkbox" ng-disabled="disableParticipant(memberObj) as isDisabled">
& I want it to work like
<td>
<input type="checkbox" ng-disabled="isDisabled && (program.created_by == memberObj.id))">
</td>
It didn't work but if there is any other way around, let me know...
You can use ngInit to assign result of your function to a variable.
<table>
<tbody>
<tr ng-repeat="memberObj in members | orderBy : ['membername'] as resultMem track by memberObj.id"
ng-init="isDisabled = (disableParticipant(memberObj) && (program.created_by == memberObj.id))">
<td align="middle" title="Add/Remove Participant" class="width40">
<input type="checkbox" ng-disabled="disableParticipant(memberObj)">
</td>
<td>
<$ memberObj.membername $>
</td>
<td>
<input type="checkbox" ng-disabled="isDisabled">
</td>
<td>
<input type="checkbox" ng-disabled="isDisabled">
</td>
<td>
<input type="checkbox" ng-disabled="isDisabled">
</td>
<td>
<input type="checkbox" ng-disabled="isDisabled">
</td>
</tr>
</tbody>
</table>
Call this function just after you load your members array
function updateMembersDisability()
{
$scope.members.forEach(function(member){
member.isDisabled = false;
if(member.membertype==1){
member.isDisabled = true;
} else if(member.membertype==2 && $scope.program.updatePermission){
member.isDisabled = true;
}
});
}
And then you can use IsDisabled property directly like this
<td>
<input type="checkbox" ng-disabled="memberObj.isDisabled && (program.created_by == memberObj.id))">
</td>
Aliasing with the as keyword is for controllers only.
You can, however, generate these checkboxes with ng-repeat to have a less boilerplate.
<tr ng-repeat="memberObj in members | orderBy : ['membername'] as resultMem track by memberObj.id">
<td align="middle" title="Add/Remove Participant" class="width40">
<input type="checkbox" ng-disabled="disableParticipant(memberObj)">
</td>
<td>
<$ memberObj.membername $>
</td>
<td ng-repeat="i in [1,2,3,4]">
<input type="checkbox" ng-disabled="disableParticipant(memberObj) && (program.created_by == memberObj.id)">
</td>
</tr>
Add a property in your member object once they are loaded like this,
function updateMembersDisability()
{
$scope.members.forEach(function(member){
Object.defineProperty(member, 'isDisabled', {
get: function() {
if($scope.memberObj.membertype==1){
return true;
} else if($scope.memberObj.membertype==2 && $scope.program.updatePermission){
return true;
}
return false;
}
});
});
}
I want to change my background-color to lightblue when the value of the checkbox is true, and change the background-color back to normal when the value is false.
<tr ng-repeat="item in rows | filter:search" ng-class="{'selected':$index == selectedRow}">
My Checkbox:
<td><input type="checkbox" ng-click="setClickedRow($index)"></td>
My Function:
$scope.selected = null;
$scope.setClickedRow = function(index){
$scope.selectedRow = index;
}
Here you have a plunker with your example: http://plnkr.co/edit/CHB65fe6Bsd3PdjWjoT4?p=preview
This is the table:
<table style="width:100%">
<tr ng-repeat="item in rows | filter:search" ng-class="{'selected': item.selected}">
<td>
<input type="checkbox" ng-model= "item.selected" ng-click="setClickedRow($index)">
</td>
</tr>
</table>
Here is the background:the checkbox was checked when "isChecked == 1" while its initalization,however,it doesn't trigger the "ng-change" event in its first "click" action.
<td ng-repeat="isCheck in item.check track by $index">
<input type="checkbox" ng-model="isCheck" ng-checked="isCheck == 1" ng-true-value="1" ng-false-value="0" ng-change="f(isCheck, item, vm.modules[$index])"/>
</td>
Check this working code:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.item = {};
$scope.item.check = [1, 0, 1, 0];
$scope.f = function(isCheck) {
console.log(isCheck);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<table>
<tr>
<td ng-repeat="isCheck in item.check track by $index">
<input type="checkbox" ng-model="isCheck" ng-checked="isCheck === 1" ng-true-value="1" ng-false-value="0" ng-change="f(isCheck)"/>
</td>
</tr>
</table>
</div>
</div>
ng-checked cannot work alongside ng-change if ng-model is changed programatically, check official docs:
https://docs.angularjs.org/api/ng/directive/ngChange
Now I need to delete row(s) depends on it is selected or not. But how can I access $index in the control for each selected row?
my code is here:
<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>S.No</td>
<td>Name</td>
<td>Dept</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="delete"/>{{$index}}</td>
<td> <input type="text" ng-model="data.name"/></td>
<td><input type="text" ng-model="data.dept"/></td>
</tr>
</table>
</div>
</div>
var app = angular.module("appTable",[]);
app.controller("Allocation",function($scope) {
$scope.dataList = [{name:'lin',dept:'b'},{name:'test',dept:'aaa'}];
$scope.add = function(){
var data = {};
data.name ='' ;
data.dept ='';
$scope.dataList.push(data);
}
var deletes=[];
$scope.delete=false;
$scope.remove = function(){
console.log(deletes);
angular.forEach($scope.delete,function(v){
if(v==true){
deletes.push($index);*How can I get the $index for selected row*
console.log(deletes);
}
});
angular.forEach(deletes,function(v,k){
$scope.dataList.splice(v, 1);
})
}
});
Now I can add the row which match the requirement, but my issue is user have to check the checkedbox in the row which they want to delete and then click delete button to delete them. for example, they can check the first and third row to delete and only keep second row.
<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>S.No</td>
<td>Name</td>
<td>Dept</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="data.isDelete"/>{{$index}}</td>
<td> <input type="text" ng-model="data.name"/></td>
<td><input type="text" ng-model="data.dept"/></td>
</tr>
</table>
</div>
</div>
var app = angular.module("appTable",[]);
app.controller("Allocation",function($scope) {
$scope.dataList = [{name:'lin',dept:'b'},{name:'test',dept:'aaa'}];
$scope.add = function(){
var data = {};
data.name ='' ;
data.dept ='';
$scope.dataList.push(data);
};
$scope.remove = function(){
var newDataList=[];
angular.forEach($scope.dataList,function(v){
if(!v.isDelete){
newDataList.push(v);
}
}); $scope.dataList=newDataList;
};
});
https://jsfiddle.net/9qttf7ph/
You might need to add the following in your ng-repeat directive :
<tr ng-repeat="data in dataList track by $index">
and then use $index for deletion.
you can get more informations about this here from the official angular documentation.
Replace
<input type="checkbox" ng-model="delete"/>
by
<input type="checkbox" ng-model="data.toBeDeleted"/>
Then, on the click of the button, remove all the data which have a truthy toBeDeleted attribute from the array.