We Keep Coding

Remove selected rows on a button click in angular js

I have a table with check box for each row .
I need to remove the rows for the selected check boxes in the table on a button click. (this button is outside ng-repeat).
The index of the selected rows are populated to an array using ng-change function but i'm unable to remove the selected rows on a single button click
Here is the Fiddle
HTML
<div ng-app="approvalApp">
<div ng-controller="SimpleApprovalController" >
<table style="width:90%" border="5" >
<tr>
<th><input type="checkbox" ng-model="CheckAllData" ng- change="selectAll()" /></th>
<th>Date</th>
<th>AssociateID</th>
<th>Check-In</th>
<th>Checkout</th>
</tr>
<tr data-ng-repeat="approval in approvalitems">
<td><input type="checkbox" value="{{approval.ReqId}}" data-ng-model="approval.selected" data-ng-change="SelectDeselect($index)"/></td>
<td>{{approval.Date}}</td>
<td>{{approval.AssociateID}}</td>
<td>{{approval.CheckIn}}</td>
<td>{{approval.Checkout}}</td>
</tr>
</table>
<input type="button" value="Approve" data-ng-model="ApproveIndex" data-ng-click="ApproveRequest()" />
Script
$scope.SelectDeselect=function(index)
{
$scope.getIndexvalues = [];
angular.forEach($scope.approvalitems, function (approval,index) {
if (!!approval.selected) {
$scope.getIndexvalues.push(index);
$scope.CheckAllData = false;
}
});
console.log($scope.getIndexvalues);
};
$scope.ApproveRequest = function () {
$scope.selectedIdsArray = [{}];
angular.forEach($scope.approvalitems, function (item) {
if (!!item.selected) {
$scope.selectedIdsArray.push({ Reqid: item.ReqId, Status: "Approved" });
$scope.CheckAllData = false;
}
});
};
};
So how to use getIndexvalues in approverequest function , or is there any better way to remove it using other angular directive.
I'm a newbie to angular js .

Fiddle: http://jsfiddle.net/jpk547zp/1/
$scope.ApproveRequest = function () {
$scope.selectedIdsArray = [{}];
$scope.approvalitemsNew = [];
angular.forEach($scope.approvalitems, function (item) {
if (!!item.selected) {
$scope.selectedIdsArray.push({ Reqid: item.Date, Status: "Approved" });
$scope.CheckAllData = false;
item.hideThis = true;
console.log($scope.selectedIdsArray);
} else {
$scope.approvalitemsNew.push(item);
}
});
$scope.approvalitems = $scope.approvalitemsNew;
$scope.getIndexvalues = [];
};
Hope this helps.

you can simply do
$scope.ApproveRequest = function () {
$scope.approvalitems = $scope.approvalitems.filter(function(i){
return !i.selected;
});
};

Check for editable column in a table with jQuery function

In the table the first column is editable and after edit it/change it I want to show the alert as Changed. I am calling the check function after 5000ms.
Adding Code Snippet for My code
Something I missed or wrong somewhere. Please Help.
Here is the Code.
var table = $("table tbody");
table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
id = $tds.eq(0).text(),
product = $tds.eq(1).text();
$check = function() {
if(($tds.eq(0).text() != id) && ($tds.eq(1).text() != product)){
alert("Changed");
}
else{
alert("Not changed");
}
}
setInterval(function() { $check(); }, 5000);
alert(id + ":" + product);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td contentEditable>63</td>
<td>Computer</td>
</tr>
</tbody>
</table>

if(($tds.eq(0).text() != id) && ($tds.eq(1).text() != product)){
This only triggers when both fields changed, change it to a "||"
Also check out this: https://developer.mozilla.org/en-US/docs/Web/Events/input for capturing contenteditable changes.

ng-enter directive and select attribute confilicted with each other

Consider this code:
<typeahead class="typeahead"
search="searchPersonage(term)"
select="selectPersonage(item)"
ng-model="typeaheadModel"
ng-enter='selectCustomer(typeaheadModel)'>
<table class="table">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr typeahead-item="customerPhone"
ng-repeat="customerPhone in customerPhones">
<td>{{customerPhone.Title}}</td>
<td>{{customerPhone.Value}}</td>
</tr>
</tbody>
</table>
</typeahead>
as you can see I have a typeahead tag and in this tag i have ng-enter directive and select attribute. What I need is when an unkown phone number is entered by user and if that number is not in typeahead objects and then user hits the enter button, I want it to be pushed in an array. But I want only that unknown number to be pushed.
However, now when user hits the enter button, not only the number is pushed in the array but also the select method is called. This causes the unknown number to be pushed into the target array, alongside an object from typeahead data source.
$scope.selectCustomer = function (item) {
$scope.selectedPhones.push({
Value: item.Value,
Title: item.Title
});
};
$scope.selectPhone = function (item) {
for (var i = 0; i < $scope.customerPhones.length; i++) {
if (item == $scope.customerPhones[i].Title
|| item == $scope.customerPhones[i].Value) {
$scope.selectedPhones.push({
Value: $scope.customerPhones[i].Value,
Title: $scope.customerPhones[i].Title
});
$scope.customerPhones = [];
flag = false;
}
}
if (flag) {
if (item.match("^09[0-3][0-9]{8}$")) {
$scope.selectedPhones.push({
Value: item,
Title: 'Unknown'
});
$scope.customerPhones = [];
}
else {
toaster.showError('This number is not valid : ' + item);
$scope.customerPhones = [];
}
}
$scope.typeaheadModel = "";
flag = true;
}

Button text and property value change when button is clicked in JavaScript

I have a input type of button. Button is something like this:
<h2>RFI Status Type</h2>
<input type="button" class="btn btn-small btn-primary" value="New RFI Status" data-bind="click: $root.createRFIStatusType" />
<hr />
<table class="search">
<tr class="table_title">
<th>RFI Status Type Name</th>
<th>Sequence</th>
<th>Active Status</th>
</tr>
<tbody data-bind="foreach: RFIStatusTypes">
<tr class="table_data">
<td><a data-bind="text: RFIStatusTypeName, click: $parent.editRFIStatusType">Edit</a></td>
<td data-bind="text: Sequence"></td>
<td>
<input type="button" id="chkActiveStatus" data-bind = "value: activeStatus(ActiveStatus) "/>
</td>
</tr>
</tbody>
</table>
The JavaScript function activeStatus(ActiveStatus) is:
<script>
function activeStatus(ActiveStatus)
{
if (ActiveStatus == 0) {
return "Deactivate";
}
else {
return "Activate";
}
}
</script>
What it is doing is that, it is taking the value of ActiveStatus, which is a column in my database table. The value of ActiveStatus is either 1 or 0. When it takes the value 0, it returns the value of the button as "Deactivate", otherwise "Activate".
When I click the button, I want to change the button value from "Activate" to "Deactivate" and vice versa, and at the same time, the corresponding ActiveStatus value will also change. If ActiveStatus is 0, it will change to 1; if it is 1 then it will change to 0.
How can I do this? I have tried this multiple times and failed. I tried an onclick event in my input but it didn't work.
EDIT-1: I've written the JavaScript code inside my view page and have modified it a bit but still not getting the desired result. Here it goes:
<script>
function activeStatus(ActiveStatus)
{
if (ActiveStatus == 0) {
ActiveStatus++;
return "Deactivate";
}
else if (ActiveStatus == 1)
{
ActiveStatus--;
return "Activate";
}
}
</script>
EDIT-2: Many have been mentioning that I haven't included knockout.js code here. So here is the RFIStatusType.js code:
var RFIStatusTypesViewModel = function () {
var self = this;
var url = "/RFIStatusType/GetAllRFIStatusType";
var refresh = function () {
$.getJSON(url, {}, function (data) {
self.RFIStatusTypes(data);
});
};
// Public data properties
self.RFIStatusTypes = ko.observableArray([]);
// Public operations
self.createRFIStatusType = function () {
window.location.href = '/RFIStatusType/RFIStatusTypeCreateEdit/0';
};
self.editRFIStatusType = function (RFIStatusType) {
window.location.href = '/RFIStatusType/RFIStatusTypeCreateEdit/' + RFIStatusType.RFIStatusTypeID;
};
self.removeRFIStatusType = function (RFIStatusType) {
// First remove from the server, then from the UI
if (confirm("Are you sure you want to delete this RFI Status?")) {
var id = RFIStatusType.RFIStatusTypeID;
$.ajax({ type: "DELETE", url: 'RFIStatusType/DeleteRFIStatusType/' + id })
.done(function () { self.RFIStatusTypes.remove(RFIStatusType); });
}
}
refresh();
};
ko.applyBindings(new RFIStatusTypesViewModel());
EDIT-3: Now my button is this:
<input type="button" id="chkActiveStatus" data-bind="value: activeStatus(ActiveStatus), click: toggleActiveStatus(ActiveStatus)" />
And my JavaScript is re-written here:
<script>
function activeStatus(ActiveStatus)
{
if (ActiveStatus == 0)
{
alert("ActiveStatus is now 0");
return "Activate";
}
else if (ActiveStatus == 1)
{
alert("ActiveStatus is now 1");
return "Deactivate";
}
}
function toggleActiveStatus(ActiveStatus)
{
if (ActiveStatus == 0)
{
ActiveStatus++;
alert("ActiveStatus is now 1");
return ActiveStatus;
}
else if (ActiveStatus == 1)
{
ActiveStatus--;
alert("ActiveStatus is now 0");
return ActiveStatus;
}
else alert("Error");
}
</script>
But still no luck.

As Govan seems the most correct, you cannot just grab a global function within the data-bind concept of knockout. 'value' will only set the value of the button...which isn't really relevant. data-bind='click: activeStatus' is how you want to handle your click event...but the function activeStatus() needs to be declared where you declare the object type defining each instance of RFIStatusTypes.
Provide more of your knockout code and this example may magically show more information as well.
Personally, I smell a good example of a custom bindingHandler coming on.

Adding a function after completion of ng-hide

I have a tr :
<tr ng-hide="func(item.status)" ng-repeat="item in itemArray" >
<td></td>
.
.
</tr>
In the Func() the item.status is compared with the value of a dropdown D which can be changed by the user at any time.
I have a div which i need to show if the current number of visible tr == 0.
I am storing the number of visible tr as
$scope.qVisible = $("#tableid tbody tr:visible").length;
How can i have the qVisible be updated only once all the ng-hide statements have been executed to get the correct result?

I am going to assume that you have a dropdown somewhere that looks something like..
<select ng-model="selectedStatus" ng-options="status for status in statuses"></select>
So your ng-hide can do something like
<tr ng-hide="item.status !== selectedStatus" ng-repeat="item in itemArray" >
<td></td>
.
.
</tr>
In your controller, you need to setup a watch on the selectedStatus..
$scope.qVisible = false;
$scope.$watch("selectedStatus",function(newVal){
//for loop over items.. counting the number of items that match selectedStatus
// if count is 0, set a scope variable
$scope.qVisible = true;
});
In your html..
<div ng-show="qVisible">...</div>
This is the way to do it without touching the DOM.

You can have $watch that listens to the same as data-ng-repeat runs the same function as hide:
function update(newValue) {
var i;
$scope.numberOfShownItems = 0;
for (i = 0; i < newValue.length; i += 1) {
if ($scope.func(newValue[i])) {
$scope.numberOfShownItems += 1;
}
}
$scope.qVisible = !!$scope.numberOfShownItems;
}
$scope.items = [1,2,3,4,5,6];
$scope.func = function (item) {
if (item % 2 === 0) {
return true;
}
return false;
}
$scope.$watch('items', update);
Example:
http://jsfiddle.net/EgZak/