I want to sort a table when a checkbox is clicked and be able to filter the table also. The code below has been fixed and works now....
HTML
<table>
<tr ng-repeat="x in myArray | filter : name | orderBy : sortOrder">
<td>{{ x.name }}</td>
<td>{{ x.age }}</td>
</tr>
</table>
<input type="checkbox" ng-model="sortByName" ng-change="setSortOrder()">
<input type="text" ng-model="name">
AngularJS
app.controller("myController", function($scope, $http)
{
$scope.filterString = '';
$scope.sortByName = false;
$scope.sortOrder = '';
$scope.setSortOrder = function()
{
if($scope.sortByName)
{
$scope.sortOrder = 'name';
}
else
{
$scope.sortOrder = '';
}
}
You are missing telling your checkbox to call the controller method that selects the sort criteria when its checked status changes. You can do this by using the ngChange directive. Try the following:
<input type="checkbox" ng-model="sortByName" ng-change="setSortOrder()">
Related
When i change the quantity than the quantity focus is lost..click here to see image
angular js Code:ng-onchange code
$scope.txtqty = function (item) {
var id = item.Id;
$http.put("/api/Products/txtqty/" + id, item).then(function (response) {
$scope.gridproducts = response.data;
})
}
html table code
<tbody>
<tr ng-repeat="item in gridproducts">
<td ng-click="griddelete(item.Id)"><a class="delete"><i class="fa fa-times-circle-o"></i></a></td>
<td class="name">{{item.ProductName}}</td>
<td>{{item.ProductRate}}</td>
<td><input class="form-control qty" type="text" style="width:50px" ng-change="txtqty(item)" ng-model="item.ProductQty" value="{{item.ProductQty}}"></td>
<td>{{item.TotalAmount}}</td>
</tr>
<tr></tr>
<tfoot><tr><th colspan="2"></th><th colspan="2"><b>Total</b></th><th><b>{{gridproducts[0].TotalBill}}</b></th></tr><tr><th colspan="2"><b></b></th><th colspan="2"><b>Total Items</b></th><th><b>25</b></th></tr></tfoot>
</table>
I'm trying to implement that when a user clicks a check box it displays all products in the ng-repeat with a quantity of 0. Else when the check box is not check all items display. Currently I was able to get half the functionality.
Check box :
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" ng-checked="vm.OnHandQty()">
Table
<tr ng-repeat="item in vm.items | filter :search">
<td ng-bind="item.itemNo"> </td>
<td ng-bind="item.description"></td>
<td ng-bind="(item.listPrice | currency)"></td>
<td ng-bind="item.onHandQty" ng-model="quantity"></td>
</tr>
Controller
vm.OnHandQty = function () {
$scope.search = {};
vm.items.forEach(i => {
if (i.onHandQty == 2) {
console.log(i);
$scope.search = i;
return true;
}
else {
$scope.search =i;
return false;
}
});
}
I would propose changing the implementation of your checkbox and controller:
Checkbox
<input type="checkbox" ng-model="vm.checked" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
- Here, we use "ng-model" instead of "ng-checked" and "vm.checked" is a variable that you define as the ng-model for your checkbox.
Controller
$scope.search = function(item) {
return ($scope.vm.checked) ? item.onHandQuantity === 0: true;
};
- Here, we define the "ng-repeat" filter that you are using in your table.
Try this instead:
<tr ng-repeat="item in vm.items" ng-show="onoffswitch==true && item.onHandQty != 0? false : true">
<td ng-bind="item.itemNo"> </td>
<td ng-bind="item.description"></td>
<td ng-bind="(item.listPrice | currency)"></td>
<td ng-bind="item.onHandQty" ng-model="quantity"></td>
</tr>
This will only show the row if onoffswitch is true and if the onHandQty is zero, otherwise it will show the row. So the row will be hidden if onoffswitch is true and onHandQty is not zero.
You can make use of ng-change and ng-model.
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" ng-model="vm.checked" ng-change="checkBoxChange(vm.checked)">
Then, from you checkBoxChange function, apply your business logic:
vm.checkBoxChange = function(checked){
if(checked){
//Do something
}else{
//Something else
}
};
I am new to angularjs here is my code i want to get data from url and also sort it by dynamically by selecting an item from select element but could't get the required result please help me out
Html
<tr ng-repeat="x in names | orderBy: sortBy ">
<td><a ng-href="{{ x.data.url}}">{{x.data.title}}</a>
</td>
<td>{{x.data.score}}</td>
</tr>
Code
$scope.$watch(function () {
return $scope.sortExpression
}, function (newSort) {
$scope.sortBy = 'data.' + $scope.sortExpression
})
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.names = response.data.children
})
Fiddle
https://jsfiddle.net/rr6q0umb/1/
Add input for the direction
<label><input type="checkbox" ng-model="direction">Reverse</label>
Add to your orderBy filter the direction value (true for reverse)
<tr ng-repeat="x in names | orderBy:sortBy:direction">
Using angularjs
I have 3 select dropdowns and a button to get a json list
Focus select dropdown looks like this:
<select id='sort' ng-model='sort'>
<option value='1'>ID</option>
<option value='2'>Departmentname</option>
<option value='3'>Number of employees</option>
</select>
<button ng-click="getinfo()">GET INFO</button>
The table looks like this
<table>
<tr> <td>{{ depid }}</td> <td>{{ depname }}</span></td> <td>{{ depemp }}</td></tr>
In the controller I have:
$scope.depid = "Department id";
$scope.depname = "Departmentname";
$scope.depemp = "Number of employees";
$scope.getinfo = function() {
var url = "";
...
}
Based on selection "sort" I want the sort column to be bold/strong or uppercase.
How do I do thIS?
You can use ng-class on the td elements:
<tr>
<td ng-class="{bold : sort == 1}">{{ depid }}</td>
<td ng-class="{bold : sort == 2}">{{ depname }}</span></td>
<td ng-class="{bold : sort == 3}">{{ depemp }}</td>
</tr>
And add a CSS rule:
.bold {
font-weight: bold;
}
Here's a Fiddle demonstration.
Following Omri Aharon I changed
ng-class="{bold : sort == 1}"
to
ng-class="{bold : sortby == 1}"
and followed Nayish I put following inside controller
$scope.getinfo = function() {
var url = "";
...
$http.get(url)
.success(function(response) {
$scope.names = response;
$scope.sortby = $scope.sort;});
}
Thanks a lot to the two of you!
I want to render text if it is Name or Value. I don't want to loop if it is createdate or enventId. I'm trying with Filter and ng-if condition. It is not working.
HTML CODE
<tr ng-repeat="event in events | filter:Name ">
<td >{{event.Name}} : </td>
<td>{{ event.Value }}</td>
</tr>
JS CODE
Events: [
{
CreatedTime: "/Date(1420757322810-0800)/",
EventId: 13,
Name: "AdGroupId",
Value: "2367898"
},
{
CreatedTime: "/Date(1420757322810-0800)/",
EventId: 13,
Name: "AdGroupId",
Value: "2367898"
}
]
I expect the result should be
AdGroupId :2367898
Assuming that what you are trying to ask is how to exclude items with neither a name nor a value, you'll need a custom function for this. This should suffice:
$scope.filterEvents = function(e){
return e.Name || e.Value;
};
And then:
<tr ng-repeat="event in events | filter:filterEvents">
<td >{{event.Name}} : </td>
<td>{{ event.Value }}</td>
</tr>
Example
Alternatively, if you are saying you want to filter the values based on a specified name and/or value, you can do so like this:
$scope.filterEvents = function (e) {
return ($scope.Name || $scope.Value) &&
(!$scope.Name || $scope.Name === e.Name) &&
(!$scope.Value || $scope.Value === e.Value);
};
(HTML is same as above)
Example
Assuming you are looking for a filter to cut out the Events that has no Name and Value properties in it.
Here is a sample for you:
Controller:
$scope.filterNameValue = function(e){
if(angular.isDefined(e.Name) && angular.isDefined(e.Value))
return e;
};
Html
<table>
<tbody>
<tr ng-repeat="event in events | filter: filterNameValue">
<td >{{event.Name}} : </td>
<td>{{ event.Value }}</td>
</tr>
</tbody>
</table>
Working Sample here