Develop Reference

How can I Enable/Disable table row contents - Angularjs

My HTML I'm having controls inside table as :-
<tr ng-repeat="r in MyTblDataList">
<td>
<input id="chkBoxClass" type="checkbox" class="checkbox checkbox-inline" ng-model="r.BoardID" />
</td>
<td>
<input id="txtClass" type="text" class="form-control" ng-model="r.BoardName" value="{{r.BoardName}}" disabled />
</td>
<td>
<input id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit" ng-click="EditUpdateChange('btnEditClass','btnUpdateClass','txtClass',true)" />
<input id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}" ng-click="UpdateClass('btnEditClass','btnUpdateClass','txtClass', r.BoardID )" hidden />
<input id="btnDeleteClass" type="button" class="btn-xs btn-danger" value="Delete" />
</td>
I'm using my function to show/Hide and Disable the textbox:-
$scope.EditUpdateChange = function (btnEditID, btnUpdateID, txtEditID, value) {
if (value) {
$('#' + btnEditID).hide();
$('#' + btnUpdateID).show();
}
else {
$('#' + btnEditID).show();
$('#' + btnUpdateID).hide();
}
//$('#' + txtEditID).prop('disabled', !value);
$(this).closest('tr').disabled = !value;
}
My problem is even though I click on Edit button in second or third row. My first row always go enable and disable. Can't figure out what I'm doing wrong. Also is there a better way of doing this using Angular?

For hiding and showing elements in angular, I think you should use the built-in directives ng-show, ng-hide or ng-if.
As the name suggests, ng-show and ng-hide show or hide the element based on the expression provided. Note that they are still in the DOM, they just aren't visible right now. ng-if insert or remove the element from the DOM, instead of showing or hiding.
For disabling the row, you can use the ng-disabled directive.
So, in your code, you could use:
<tr ng-disabled="!r.BoardID"> <!-- Didn't test, but I think this will disable the whole row, including the checkbox, so you may want to move the ng-disabled to the input itself -->
<input id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit" ng-click="EditUpdateChange()" ng-hide="r.BoardID" />
<input id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}" ng-click="UpdateClass()" ng-show="r.BoardID" />
</tr>
In general, I think you don't really need to use JQuery when developing an Angular application.
Edit 1
The status you want then:
At first, edit and delete button are available and the textbox is disabled
When edit button is clicked:
Enable the textbox
Show the update button
Hide the edit button
Alright, so the code for this would be like that:
Row in html
<tr ng-repeat="r in MyTblDataList">
<td>
<input id="chkBoxClass" type="checkbox" class="checkbox checkbox-inline" ng-model="r.BoardID" />
</td>
<td>
<input ng-disabled="!r.isEditing" id="txtClass" type="text" class="form-control" ng-model="r.BoardName" value="{{r.BoardName}}"/>
<!-- Will disable on null, false and undefined -->
</td>
<td>
<input ng-click="onEdit($index)" ng-if="!r.isEditing" id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit"/>
<!-- $index is a variable provided by ng-repeat -->
<!-- Similar as above, but will be inserted in the DOM instead of disabled. -->
<input ng-click="onUpdate($index)" ng-if="r.isEditing" id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}"/>
<!--
If you want to use show/hide, you would use:
Edit btn: ng-hide="r.isEditing"
Update btn: nh-show="r.isEditing"
-->
<input id="btnDeleteClass" type="button" class="btn-xs btn-danger" value="Delete" />
</td>
</tr>
variable and functions needed in JS
function onEdit(index){
MyTblDataList[index].isEditing = true;
}
function onUpdate(index){
// You may want to do something with the new data, maybe some validation or so
MyTblDataList[index].isEditing = false;
}
When updating the data in the controller, the change should be reflected in the view. To ilustrate this, I have created a Plunker with your code. In this plunker:
I use vm as syntax (you can search about this, but it is a better aproach to link the data to the controller through var vm = this instead of accessing the scope directly)
Made one field editable at one time
If you leave without clicking the Update button, the changes are discarted.
I have choosed to use the ng-if instead of ng-show and ng-hide to select what to show because as ng-if remove the content from the HTML, it remove the watchers manteined by Angular. Note that if there is an excesive amount of watchers, performance is affected.

how to get ng-repeat checkbox values on submit function in angularjs

I have a form which has 10 checkboxes. By default angular js triggers on individual checkbox. I want to grab all selected check box values on submit action only. Here is my code...
<form name="thisform" novalidate data-ng-submit="booking()">
<div ng-repeat="item in items" class="standard" flex="50">
<label>
<input type="checkbox" ng-model="typeValues[item._id]" value="{{item._id}}"/>
{{ item.Service_Categories}}
</label>
</div>
<input type="submit" name="submit" value="submit"/>
</form>
$scope.check= function() {
//console.log("a");
$http.get('XYZ.com').success(function(data, status,response) {
$scope.items=data;
});
$scope.booking=function(){
$scope.typeValues = [];
console.log($scope.typeValues);
}
I am getting empty array.
Can somebody tell how to grab all selected checkbox values only on submit event.

<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.SELECTED" ng-true-value="Y" ng-false-value="N"/>
</div>
<input type="submit" name="submit" value="submit" ng-click="check(items)"/>
$scope.check= function(data) {
var arr = [];
for(var i in data){
if(data[i].SELECTED=='Y'){
arr.push(data[i].id);
}
}
console.log(arr);
// Do more stuffs here
}

Can I suggest reading the answer I posted yesterday to a similar StackOverflow question..
AngularJS with checkboxes
This displayed a few checkboxes, then bound them to an array, so we would always know which of the boxes were currently checked.
And yes, you could ignore the contents of this bound variable until the submit button was pressed, if you wanted to.

As per your code all the checkboxes values will be available in the typeValues array. You can use something like this in your submit function:
$scope.typeValues
If you want to access the value of 3rd checkbox then you need to do this:
var third = $scope.typeValues[2];

Declare your ng-model as array in controller, like
$scope.typeValues = [];
And in your template, please use
ng-model="typeValues[item._id]"
And in your controller, you will get this model array values in terms of 0 and 1. You can iterate over there.

Not able to get value of radio select setting dynmically in AngularJS

Following is my code in which I am not getting selected radio option for each corresponding rows, let me know what I am doing wrong here.
My Plnkr Code - http://plnkr.co/edit/MNLOxKqrlN5ccaUs5gpT?p=preview
Though I am getting names for classes object but not getting the selection.
HTML code -
<body ng-controller="myCtrl">
<div class="container-fluid">
<form name="formValidate" ng-submit="submitForm()" novalidate="" class="form-validate form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-6">
<input type="text" name="name" required="" ng-model="classes.name" class="form-control" />
</div>
</div>
<div class="form-group">
<table id="datatable1" class="table table-striped table-hover">
<tr class="gradeA" ng-repeat="cls in reqgrps">
<td ng-bind="cls.name"></td>
<td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 1</td>
<td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 2</td>
<td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 3</td>
</tr>
</table>
</div>
<div class="panel-footer text-center">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</form>
</div>
<div class="result">{{classes}}</div>
</body>
Script File -
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
$scope.reqgrps = [{name: 'Sub1', roll: 121},{name: 'Sub2', roll: 122}, {name: 'Sub3', roll: 123}];
$scope.classes = {};
$scope.result = {};
$scope.submitForm = function() {
$scope.result = $scope.classes;
};
});
------------- EDIT -------------
Expected Output -
classes obj -
{
name: "Test Class",
satisfies: [
"Sub1": "Choice 1",
"Sub2": "Choice 3",
"Sub3": "Choice 2",
.................
..................
..................
..................
"Subn": "Choice 2",
]
}

You'll need to differentiate between each row that is generated by ng-repeat.
You can do this by adding [$index] to each ng-model like this:
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 1"> Choice 1</td>
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 2"> Choice 2</td>
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 3"> Choice 3</td>
As others have mentioned, you can make the result dynamic as needed by using ng-value to set the value that is passed into the model.
The resulting object is something like this:
{"name":"Bill","satisfies":{"0":"Choice 2","1":"Choice 1","2":"Choice 3"}}
See plunker here

You should specify a different ng-model property for each row. (Not sure why you'd want to specify the same model on 3 identical rows). In theory you don't HAVE to do this, but as I said, I don't see why you would.
Also you should add a value attribute on your radio buttons:
http://plnkr.co/edit/JN4JuQJH2OvRxoawfDbv?p=preview
From the angular docs:
value string
The value to which the expression should be set when selected.
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
I would also recommend removing the initialization of empty objects in your controller (if ng-model doesn't find the property on the scope it will just create it for you), and I've noticed you've used ng-bind, in case you didn't know that's just a shortcut for the double brackets: {{}}
EDIT:
In case your value needs to be a dynamic value you can use ng-value and specify a property on the scope which you can then set in your controller

You need to set ng-value for each radio button, so than Angular will be able to pick those values. You have 3 identical rows so I added some dummy values for them to show the right output.
http://plnkr.co/edit/AxUx83xdotniYru6amGU?p=preview
Also, you can find an explicit example of using Angular radio buttons in official docs here:
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
UPDATE:
Check edited plnkr, hope it helps!

Disable/Enable button based on checkbox selection

I'm having a list of check boxes and a main check box which if selected checks all the check boxes .I can also check the individual check boxes.
HTML:
<button type="button" ng-disabled="!selectedAll">Click</button>
<div>
<input type="checkbox" ng-model="selectedAll" class="checkbox" ng- click="toggle=!toggle">
</div>
<div ng- repeat="item in items" >
<input type="checkbox" ng- checked="toggle" ng-model="selectedCheckBox[item.id]"> <i></i>
</div>
Controller:
$scope.toggle = false;
$scope.selectedIntervention = {};
I'm able to disable/enable the button by selecting the main check box(outside ng-repeat) by enabling ng-disabled="!selectedAll" .But I'm not able to diable the button if I select any check box that is inside ng-repeat.I tried by giving ng-model="!selectedCheckBox" but didn't worked that way.Any possible solution is highly appreciated.Thanks
$scope.toggle = false;
$scope.selectedCheckBox = {};

Do following
Add
ng-click="checked(toggle)"
In
<input type="checkbox" ng-click="checked(toggle)" ng-model="selectedCheckBox[item.id]">
And change button like this
<button type="button" ng-disabled="!toggle">Click</button>
And in controller
$scope.checked = function () {
$scope.toggle = !$scope.toggle;
}

Angular: Push item to list doesn't update the view

When I push an item to an array, the view won't refresh the list.
table:
<tbody id="productRows">
<tr data-ng-repeat="product in products | filter: search">
<td>{{ product.Code}}</td>
<td colspan="8">{{ product.Name}}</td>
</tr>
</tbody>
form:
<form data-ng-submit="submitProduct()">
Code:
<br />
<input type="text" required data-ng-model="product.Code"/>
<br />
<br />
Naam:
<br />
<input type="text" required data-ng-model="product.Name"/>
<br />
<input type="submit" value="Opslaan" />
</form>
submitProduct in controller:
$scope.submitProduct = function () {
console.log('before: ' + $scope.products.length);
$scope.products.push({Code: $scope.product.Code, Name: $scope.product.Name});
console.log('after:' + $scope.products.length);
console.log($scope.products);
$scope.showOverlay = false;
};
As you can see, I log the total items in the array and it behaves like I would expect. The only thing that doesn't do what I expect is the content of my table, that doesn't show the new value.
What do I have to do, so the new row is displayed in the table?

I can't see the rest of your code, but make sure $scope.products is defined in your controller.
See this example.
The only addition I made to the code you provided was:
$scope.products = [];
If this doesn't help then please provide more information.

Thanks for the answer and the comments. The problem was at another place. In my routeProvider I had declared a controller. I also had a ng-controller directive in my div. So my controller gets executed twice. When I removed the ng-controller directive, everything was just working as it should be :)