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
Related
I am looking for help in creating a custom filter that will work on any table that has a search property.
So far, I can get the table to filter based on what is input into each column search bar, but I can't figure out how to implement a 'startsWith' for each column as well so that it will only find 'Florida' if you type 'Flor' or 'Fl', etc. instead of finding it when typing 'lor' or 'ida'.
I have been able to get just one column working with a custom filter, but lost on how to implement this for multiple columns.
Here is the plunkr example: http://plnkr.co/edit/CE3uhZmksiepmVL2bLNF?p=preview
Script:
var app = angular.module("stateManagement", []);
app.controller("myCtrl", ["$scope", myCtrl]);
function myCtrl($scope) {
$scope.names = [{
Name: "Florida",
Country: "USA"
}, {
Name: "Texas",
Country: "USA"
}]
$scope.state = '';
$scope.elements = [{
state: "Florida"
}, {
state: "Texas"
}];
}
app.filter('myfilter', function() {
function strStartsWith(str, prefix) {
return (str.toLowerCase() + "").indexOf(prefix.toLowerCase()) === 0;
}
return function(items, state) {
var filtered = [];
angular.forEach(items, function(item) {
if (strStartsWith(item.state, state)) {
filtered.push(item);
}
});
return filtered;
};
});
Html:
<body ng-app='stateManagement' ng-controller='myCtrl'>
<div class="col-md-12">
<table class="table table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<th><input class="form-control"
type="text"
placeholder="Search..."
ng-model="search.Name"/>
</th>
<th><input class="form-control"
type="text"
placeholder="Search..."
ng-model="search.Country"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names | filter:search">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
<input ng-model="state">
<table id="hotels">
<tr data-ng-repeat="element in elements | myfilter:state">
<td>{{element.state}}</td>
</tr>
</table>
<br/>
</div>
</body>
Thank you in advance for helping!
I have two errors saying: Cannot read property 'active' of undefined and Cannot read property 'boss' of undefined while I'm trying to use ng-repeat over my array of users.
In the controller I'm using the following code:
$scope.users = [
{
id: 1,
name: 'John',
birthday: '06.07.2008',
city: 'Budapest',
active: false,
boss: false
},
{
id: 2,
name: 'Mary',
birthday: '01.02.2003',
city: 'Berlin',
active: false,
boss: true
},
{
id: 3,
name: 'James',
birthday: '04.05.2006',
city: 'Vienna',
active: false,
boss: false
}
];
$scope.isActive = function (id) {
return $scope.users[id].active;
}
$scope.isBoss = function (id) {
console.log($scope.users[id]);
return $scope.users[id].boss;
}
In the view I have following code:
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Birthday</th>
<th>City</th>
<th>Active</th>
<th>Boss</th>
</tr>
</thead>
<tbody>
<div>
<tr ng-click="goToProfile(user.id)" ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.birthday}}</td>
<td>{{user.city}}</td>
<td>
<input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }">
</td>
<td>
<input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }">
</td>
</tr>
</div>
</tbody>
At the end it prints the table in the right way but also throws those errors. Did I miss something?
Also here's rendered result:
<tbody>
<!-- ngRepeat: user in users -->
<tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
<td class="ng-binding">1</td>
<td class="ng-binding">John</td>
<td class="ng-binding">06.07.2008</td>
<td class="ng-binding">Budapest</td>
<td>
<input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }" checked="checked">
</td>
<td>
<input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }" checked="checked">
</td>
</tr>
<!-- end ngRepeat: user in users -->
<tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
<td class="ng-binding">2</td>
<td class="ng-binding">Mary</td>
<td class="ng-binding">01.02.2003</td>
<td class="ng-binding">Berlin</td>
<td>
<input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }" checked="checked">
</td>
<td>
<input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }" checked="checked">
</td>
</tr>
<!-- end ngRepeat: user in users -->
<tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
<td class="ng-binding">3</td>
<td class="ng-binding">James</td>
<td class="ng-binding">04.05.2006</td>
<td class="ng-binding">Vienna</td>
<td>
<input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }">
</td>
<td>
<input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }">
</td>
</tr>
<!-- end ngRepeat: user in users -->
</tbody>
That's because your isActive and isBoss functions are being passed user.id. I observed your user.id starts from id 1, meanwhile in these functions, you're trying to access the $scope.users using the indexes passed in. What happens is that, for example, a user.id of 3 in your isActive function would try to access $scope.users[3].active. However, there's actually no index 3 (representing the fourth item in the $scope.users array, which is undefined)
Change your ..isActive(user.id) to ...isActive($index) and your ...isBoss(user.id) to ...isBoss($index)
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.
I have a table of data each with a checkbox. Any row that is checked moves into a second table for processing (processing not shown). I want the second table hidden unless it has rows but can't seem to figure out the ng-show. (Updated to show the need to hide the second table)
Here's the updated jsfiddle example.
Here's my html (I have the line that doesn't work commented out):
<span>Table One</span>
<div ng-controller="checkBoxCtrl">
<table width="400" border="1">
<tr>
<th>✔</th>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="data in tableOne" id="item{{data.key}}">
<td width="20px">
<input type="checkbox" ng-model="data.checked">
</td>
<td>{{data.key}}</td>
<td>{{data.value}}</td>
</tr>
</table>
<br>
<!--<div ng-show="tableOne.key.checked == true"> -->
<div>
<span>Table Two</span>
<table width="400" border="1">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="data in tableOne | filter: {checked:true}">
<td>{{data.key}}</td>
<td>{{data.value}}</td>
</tr>
<tr>
<td colspan="2">
<button>New Group</button>
</td>
</tr>
</table>
</div>
and here's the javascript:
var app = angular.module('myApp', []);
function checkBoxCtrl($scope){
$scope.tableOne=[
{key: '1', value: 'a'},
{key: '2', value: 'b'},
{key: '3', value: 'c'},
{key: '4', value: 'd'}
];
};
Simply add a function isAtLeastOneDataChecked() in your controller, which returns true if at least one data is checked, and false otherwise, and use it in your template:
<table width="400" border="1" ng-show="isAtLeastOneDataChecked()">
$scope.isAtLeastOneDataChecked = function() {
return $scope.tableOne.some(function(data) {
return data.checked;
});
};