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>
Related
I have this code, now I want to create two checkboxes one for "emp_nome" and another for "local" when I check either of them I can search my input only for those checked values, help, please
<input type="text" id="myInput" ng-model="search.SN" placeholder="Search for names..">
<div style="overflow-x:auto;">
<table id="myTable">
<tr style="border-bottom:1px solid black;" class="header">
<td>ID</td>
<td>Nome Entidade</td>
<td>Ultima Localização</td>
<td>Categoria</td>
<td>Nº de Reclamações contra Entidade</td>
<td>Data da última reclamação</td>
</tr>
<tr ng-repeat="x in myData | filter: {emp_nome: search.SN} || filter: {local: search.SNs}" id="removal">
<td>{{ x.id }}</td>
<td style="background:rgba(0, 159, 255, 0.24);font-size:17px;"><u>{{ x.emp_nome }}</u></td>
<td>{{ x.local }}</td>
<td>{{ x.tipo }}</td>
<td>
<center>{{ x.emp_rec }}</center>
</td>
<td>
<center>{{ x.data }}</center>
</td>
</tr>
</table>
<br><br>
</div>
You can make the filter expression dynamically and manage it in your controller. I mean ng-repeat="x in myData | filter: {emp_nome: search.SN}" could be ng-repeat="x in myData | filter: filterObject"
And you could manage to populate this filterObject to have the object you want to use in filter, by using ng-change (in your input text & checkbox) for example
example in ng-change may be:
if (checkboxValue === 'local') { //local checked
$scope.filterObject = {local: $scope.search.SN};
} else if (checkboxValue === 'emp_nome') {//emp_nome checked
$scope.filterObject = {emp_nome: $scope.search.SN};
} else { //filter by all
$scope.filterObject = $scope.search.SN;
}
it's just an example, I don't know how you manage it
Official doc about filter: https://docs.angularjs.org/api/ng/filter/filter
The table has columns - ID, PASSED, FAILED and there is a checkbox -show students with no FAILURES
I can't figure out how to use angular ng-if to bind the checkbox with the table. So if the user checks the checkbox , it should show all rows else only students with no failures. I'm new to angularJS :|
<tr>
<td><span class="CheckBox"><input type="checkbox" value="">Show Students with No Failures</span></td>
</tr>
<tbody >
<!--display none-->
<tr ng-repeat="t in table">
<td colspan="1" ng-hide='t.Failed===0'>{{t.id}}</td>
<td colspan="1" ng-hide='t.Failed===0'>{{t.Total}</td>
<td colspan="1" ng-hide='t.Failed===0'>{{t.Passed}}</td>
<td colspan="1" ng-hide='t.Failed===0'>{{t.Failed}}</td>
</tr>
Added a implementation of what you are trying to accomplish.
Using a ng-repeatin combination with a filter.
See JSFIDDLE
VIEW
<div id="app" ng-app="myApp" ng-controller="myCtrl">
Only passes students?
<input type="checkbox" ng-init="passes = true" ng-model="passes">
<br/> Not passed student students?
<input type="checkbox" checked ng-init="fails = true" ng-model="fails">
<br/>
<br/>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr class="days">
<th>Student name</th>
<th>#FAILS</th>
<th>PASSED?</th>
</tr>
<tr ng-repeat="student in studentData | filter: studentFilter">
<td>{{ student.name }}</td>
<td>{{ student.fails }}</td>
<td>
{{ (student.fails <=0 ) ? 'YES' : 'NO' }} </td>
</tr>
</tbody>
</table>
</div>
CONTROLLER
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope) {
$scope.studentFilter = function (item) {
if($scope.passes && $scope.fails) return item;
if($scope.passes && item.fails <= 0) return item;
if($scope.fails && item.fails > 0) return item;
};
$scope.studentData = [{
id: 1,
name: 'Nabil',
fails: 1
}, {
id: 2,
name: 'Daan',
fails: 0
}, {
id: 3,
name: 'Walter',
fails: 2
}, {
id: 4,
name: 'Magaly',
fails: 0
}, {
id: 5,
name: 'Steven',
fails: 2
}, {
id: 6,
name: 'Bill',
fails: 0
}];
});
I wouldn't use ng-if or ng-show/ng-hide for this. I'd use a filter in your in your ng-repeat expression to filter the array values.
filter UI
`<input type="checkbox" ng-model="filterObj.Failed">`
table
`ng-repeat="t in table | filter:filterObj"`
Something along those lines. Your boolean property keys are a little confusing to me but basically the filterObj keys should match with keys found on your table objects.
codepen - http://codepen.io/pen?template=zrGjgW
Instead of doing a ng-hide on each <td>, do it on tr level. Also, bind to a ng-model with your checkbox, to be able to use it:
<tr>
<td>
<span class="CheckBox">
<input type="checkbox"
ng-model="showNoFailures">Show Students with No Failures
</span>
</td>
</tr>
<tr ng-repeat="t in table"
ng-if="t.Failed === 0 || showNoFailures">
<!-- show if all passed, or the cb is checked -->
<td colspan="1">{{t.id}}</td>
<td colspan="1">{{t.Total}}</td>
<td colspan="1">{{t.Passed}}</td>
<td colspan="1">{{t.Failed}}</td>
</tr>
See this working jsfiddle
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;
}
}
I am trying to get the multiple checkbox value and attribute values.
Each checkbox have multiple attribute values(data-id, data-ot,data-si).
How to get the checked checkbox with 3 attribute values.
<table>
<thead class="search">
<tr>
<th>
<input type="checkbox" class="selectall " ng-model="selectall" ng-click="select(data)">
</th>
</tr>
</thead>
<tbody>
<tr >
<td>
<input data-id="287" data-ot="31" data-si="541" type="checkbox" - ng-model="rowselect">
</td>
</tr>
<tr >
<td>
<input data-id="295" data-ot="331" data-si="31" type="checkbox" ng-model="rowselect">
</td>
</tr>
<tr >
<td>
<input data-id="297" data-ot="321" data-si="31" type="checkbox" ng-model="rowselect">
</td>
</tr>
<tr >
<td>
<input data-id="296" data-ot="451" data-si="671" type="checkbox" ng-model="rowselect">
</td>
</tr>
<tr >
<td>
<input data-id="293" data-ot="91" data-si="651" type="checkbox" ng-model="rowselect">
</td>
</tr>
<tr >
<td>
<input data-id="294" data-ot="13" data-si="14" type="checkbox" ng-model="rowselect">
</td>
</tr>
</tbody>
</table>
<input type="button" name="Submit" value="Submit" ng-click="ShowSelected()" />
Expected output:
For example 2 checkbox selected selected means:
[{"id":"xx","ot":"xx","si"},{"id":"xx","ot":"xx","si"},]
Code:
app.controller('MyCtrl', function($scope) {
$scope.ShowSelected = function() {
///
};
});
I don't see the point in keeping your data inside attributes like that unless that is something you specifically need for some particular reason.
The easiest way to do this is to make an object array on your scope like this:
$scope.data = [
{id: 123, ot: 234, si: 567, checked: false},
{id: 321, ot: 243, si: 789, checked: false},
{id: 345, ot: 678, si: 567, checked: false}
];
Then you can use ng-repeat to create the table and bind the checkboxes to the .checked property:
<table>
<thead>
<!-- your table header -->
</thead>
<tbody>
<tr ng-repeat="element in data">
<td>
<input type="checkbox" ng-model="element.checked">
</td>
</tr>
</tbody>
</table>
And then write the showSelected() function:
$scope.showSelected = function(){
var tempArray = [];
for(var i=0; i<data.length; i++){
if(data[i].checked) tempArray.push(data[i]);
}
return tempArray; //or maybe console.log(tempArray) or encode to JSON etc.
}
Add attribute 'checked' to your checkbox model
$scope.checkboxList = {[
{
"id": "xx",
"ot": "xx",
"checked": false
},
{
"id": "xx",
"ot": "xx",
"checked": false
}
]}
Use ng-model in your html to bind to your checked attribute
<tr ng-repeat="checkbox in checkboxList ">
<td><input type="checkbox" ng-model="checkbox.selected"></td>
<td>{{checkbox.ot}}</td>
</tr>
And in your controller you can use $filter to filter your checkboxes
app.controller('MyCtrl', function($scope, $filter) {
$scope.ShowSelected = $filter('filter')($scope.checkboxList , { $: true });
});
I have checkboxes with table headers, i want to hide the table columns and rows based on the checkbox click,
<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>
<table>
<tr>
<th ng-show="checked=='true'">Activity ID</a></th>
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="checked=='true'">{{nm.formattedIdentifier}}</td>
<td>{{nm.description}}</td>
</tr>
</table>
I tried but no luck.
<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>
<table>
<tr>
<th ng-show="checked"><a>Activity ID</a></th>
//here checked gets bool value itself based on selection. you don't need to compare it to string 'true'.
//keep in mind i assume {{checked}} returns only bool value
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="checked">{{nm.formattedIdentifier}}</td>
<td>{{nm.description}}</td>
</tr>
</table>
Working fiddle for your : http://jsfiddle.net/b69pkeLd/1/
Let me know if any issue occurs.
I hope this is what you are looking for:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.fieldvalues = [
{text: 'Test1', checked: false},
{text: 'Test2', checked: false}
];
$scope.makerQueueData = [
'Whatever your', 'data is'
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="opt in fieldvalues">
<input type="checkbox" id="checkbox-{{$index}}" ng-model="opt.checked" value="{{opt.text}}" />
<label for="checkbox-{{$index}}">{{opt.text}}</label>
<table ng-show="opt.checked">
<tr>
<th>Activity ID</a></th>
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="opt.checked'">{{$index}}</td>
<td>{{nm}}</td>
</tr>
</table>
</div>
</div>
Moreover, use <label> for type="checkbox" description. This makes the label clickable.