We Keep Coding

how to detect which table row is clicked when ng-repeat is on the <tr> tag | Angularjs

I have a table row with input columns, i want to get the value (id) of a td, and for some reason, i have to do it by calling a function when td is clicked
HTML CODE:
<tr ng-repeat="fr in nonConfirmedFactureRetour">
<td>
//storing id in the data-item Attr.
<input id="pending_item_name" data-item="{{fr.id}}" value="{{fr.facture_item_name}}" type="text"/>
</td>
<td>
<input id="pending_cls_crt" value="{{fr.fcls_crt}}" type="text"/>
</td>
<td>
<input id="pending_piece" value="{{fr.fpiece}}" type="text"/>
</td>
<td>
<input id="pending_dateCom" value="{{fr.dateCom}}" type="text"/>
</td>
<td>
<input id="pending_dateRec" value="{{fr.dateRec}}" type="text"/>
</td>
<td>
// calling function to hget the id
<input ng-click="confirmEntity_retour();" type="button" value="Confirm"/>
</td>
</tr>
JS Code:
$scope.confirmEntity_retour=function(){
var item_nameId=$("#rfi").attr("data-itid");
alert(item_nameId); //alert the id when calling this function
}
I expect to get the id of the input attr. when clicking on the submit
but the problem is that i am getting always the first id no matter what td is clicked

Using JQuery to get data from the DOM is against the paradigm of AngularJS. You should use data-binding instead. You can pass the item's ID as an argument to the confirmEntity_retour function.
HTML template:
<input ng-click="confirmEntity_retour(fr.id);" type="button" value="Confirm"/>
Controller:
$scope.confirmEntity_retour = function(id) {
alert(id);
}

Try passing the entire item into the function as an argument.
$scope.confirmEntity_retour=function(item){
alert(item.id)
}
<input ng-click="confirmEntity_retour(fr);" type="button" value="Confirm"/>

On Button Click, how do I change row with span to input and focus each input using angularjs

I have a table, with 2 labels/inputs (i use a ng-show/ng-hide which works with the edit button), and 2 buttons (1 button is edit, and 1 button is delete). What i want to do is when the user clicks the edit button, it should hide the spans and shows the inputs(textboxes) and focus on the first input. If the user clicks outside of either inputs, (in my opinion, loses focus which mean using blur method), then the inputs should turn back to span with the updated values. Here is what I have created, but I can't figure out the rest. New to angular so any help will be appreciated and voted.
This is the html code:
<table class="tableGV">
<tbody>
<tr>
<td class="DisplayRowData">
<span class="LabelText" data-ng-hide="data1">{{data1}}</span>
<input class="DataText" type="text"data-ng-show="showEditMode" maxLength="1" data-ng-model="editData1" ng-change="cs.ClassCode"/>
</td>
<td class="DisplayRowData">
<span class="LabelText" data-ng-hide="data2">{{data2}}</span>
<input class="DataText" type="text" data-ng-show="data2" maxlength="50" data-ng-model="data2" />
</td>
<td align="right">
<button type="button" id = "btnEditClassService{{$index}}" data-ng-click="edit(cs, $index)" class="editButton"></button>
<button type="button" id = "btnDeleteClassService{{$index}}" data-ng-click="delete(cs, $index)" class="deleteButton"></button>
</tr>
</tbody>
</table>
after this, i am not sure where to go. Thanks for anyone to help me.

you can check this plnkr. The solution is not elegant but I think it sastify your requirement.
function onEdit(){
vm.isEdit = true;
executeAfterDOMRender(function(){
document.getElementById('txt1').focus()
});
}
function onBlur(){
executeAfterDOMRender(function(){
var txtIds = ['txt1', 'txt2'];
var activeElementId = document.activeElement.id;
if(~txtIds.indexOf(activeElementId)){
//txt boxes is focued, do nothing here
} else {
vm.isEdit = false;
}
});
}
function executeAfterDOMRender(callback){
$timeout(callback);
}

Use data of ng-repeat

I can display a table of users from my database on my web application using ng-repeat. I can add and delete directly from the web application but now I'm trying to update informations about those users. I would like to click on a button on the row of the user (each rows display informations for one user, 1 row = 1 user) when I clicked on this button I would like to make a form with input fields filled with actual values.
I can only get informations about my users by clicking on this button but I don't know how to "send" informations to this form.
My table of users :
<tr ng-repeat="user in users">
...
</tr>
But something like this is not working at all :
<form>
<label>Name</label>
<input type="text" id="up_name" ng-model="user.name"/>
<label>Age</label>
<input type="text" id="up_age" ng-model="user.age"/>
...
</form>

If you are using this synthax, your form have to be in your ngRepeat. It is not the best way to do it, as you will have a form for user.
I would suggest you something different. In your controller, set an edit() function:
$scope.edit = function(user) {
$scope.editedUser = user;
}
When clicking a user in your table, call the edit() function:
<tr ng-repeat="user in users" ng-click="edit(user)">
...
</tr>
You can now edit in the form the editedUser object:
<form ng-if="editedUser">
<label>Name</label>
<input type="text" id="up_name" ng-model="editedUser.name"/>
<label>Age</label>
<input type="text" id="up_age" ng-model="editedUser.age"/>
...
</form>

What you can do is the following :
<tr ng-repeat="user in users" ng-init="selectedUser = null">
<td> {{ user.name }}</td>... <td ng-click="selectedUser = user"> edit </td>
</tr>
<div ng-if="selectedUser">
<form>
<label>Name</label>
<input type="text" id="up_name" ng-model="user.name"/>
<label>Age</label>
<input type="text" id="up_age" ng-model="user.age"/>
...
</form>
</div>

I think that you are talking about a sort of master-detail ui pattern.
Here it is a public plunker that will solve that kind of problem

Insert the both input and span HTML directive in <td> and use ng-switch : ng-switch-when & ng-switch-default to display only one field.
<td class="sorting_1" ng-switch="mode">
<input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.username">
<span ng-switch-default id="item.username">{{item.username}}</span>
</td>
You need to write a custom directive for it.Reason for writing custom directive is the value of ng-switch will associate with individual instead of global.
In the last <td> tag add : which will contain edit and update buttons:
<td ng-switch="mode">
<button class="btn btn-success btn-xs edit" ng-switch-when="edit" ng-
click="updateItem(edit, index)">
<i class="fa fa-floppy-o"></i>
</button>
<button class="btn btn-success btn-xs" ng-switch-default ng-
click="editItem(item)">
<i class="fa fa-pencil-square-o "></i>
</button>
</td>
JS
$scope.editItem = function(oldData) {
$scope.edit = angular.copy(oldData);
$scope.mode = "edit";
}
$scope.updateItem = function(data, index) {
$scope.$emit('update', data, index);
$scope.mode = "default";
}
The value of input-box will be updated using
$scope.edit = angular.copy(oldData); into editItem() function.
With the use of event emitters modify the main object.
$scope.$on('update', function(event, data, index) {
angular.copy(data, $scope.items[index]);
});
use angular.copy to deep clone value instead of passing value as a reference.
Check http://codepen.io/sumitridhal/pen/YVPQdW

bind a textbox value if checkbox is checked

how to pass a textbox value to controller based on condition .
if checkbox is checked then bind the textbox with object value and pass to the controller other wise just leave it blank and pass the user input to controller.. what i am doing is not working. what is wrong with my code it is working in the case if checkbox is checked.
$scope.Product = [
{"ProductID":12,"LNumber":"hrx",weght:"2"},
{"ProductID":13,"LNumber":"pty",weght:"1"}
]
<div>
<div>
<input type="checkbox" data-ng-model="Copyknotes" />
<span >Copy notes from</span>
</div>
<table data-ng-repeat="Item in Product track by $index">
<tr >
<td>
<input type="radio" name="groupName_{{Item.ProductID}}" data-ng-model ="Item.isSelected" />
</td>
<td data-ng-if="Copyknotes == true">
<input type="text" data-ng-model="Item.LNumber">
</td>
<td data-ng-if="Copyknotes == false" id="hi">
<input type="text" data-ng-model="Item.LNumber=""">
</td>
</tr>
</table>
</div>

Just use
data-ng-init=""
instead of
data-ng-model="Item.LNumber="""
use
data-ng-model="Item.LNumber"
<table data-ng-repeat="Item in Product track by $index">
<tr >
<td>
<input type="radio" name="groupName_{{Item.ProductID}}" data-ng-model ="Item.isSelected" />
</td>
<td data-ng-if="Copyknotes == true">
<input type="text" data-ng-model="Item.LNumber">
</td>
<td data-ng-if="Copyknotes == false" id="hi">
<input type="text" data-ng-model="Item.LNumber" data-ng-init="">
</td>
</tr>
</table>

Use scope.function
<input type="checkbox" data-ng-model="Copyknotes" ng-change="changeValue(Copyknotes)" />
//Code should be inside Angular js controller
$scope.changeValue = function(Copyknotes){
if(Copyknotes)
{
//Manipulate text box value here
$scope.Item.LNumber = 'whatever';
}
}

Here is an example:
https://plnkr.co/edit/3Vtl6roWfL1ZqaR2nEvf
<td data-ng-if="Copyknotes == false">
<input type="text" data-ng-model="Item.NNumber" ng-init="Item.NNumber = ''">
</td>
The expression was wrong - data-ng-model="Item.LNumber=""" - if you want to assign a new value, you can use Item.LNumber = "''" (two single quotes within double quotes) to avoid interference with tag attribute "" symbols. I've made a live example of how it could be done. Don't know if your controller need original values of input, so new values (when checkbox is unchecked) are saving to NNumber instead. You can freely change them to LNumber if you want. Also, ng-init directive is used to initiate NNumber parameter of object when inputs are rendered into view.
Also you should define Copyknotes to compare. Or write your conditions like ng-if="Copyknotes", ng-if="!Copyknotes".

<input type="checkbox" data-ng-model="Copyknotes" ng-change="changeValue(Copyknotes)" />
first of all remove the data-ng-model and use following:
//Code should be inside Angular js controller
var oninput = null;
$scope.changeValue = function(Copyknotes){
if(Copyknotes)
{
var oninput = document.getElementById("textbox").onchange =function(){
$scope.item.LNumber = this.value;
}
//Manipulate text box value here
}else{
$scope.Item.LNumber = '';
oninput = null
}
}

How to disable an checkbox once a certain radio button is clicked.

Want to disable the checkbox "animation" once the "3D" radio button is selected. and too un-disable once the "2D" is selected.
html code
<script type="text/x-handlebars" id="createProject">
<div class="projectForm">
<table cellpadding="10">
<tr>
<td> Project Name </td>
<td> <input type="text" name="projectName" /> </td>
</tr>
<tr>
<td> Project Description </td>
<td> <textarea name="projectDesc" > </textarea> </td>
</tr>
<tr>
<td> Pipleline Type </td>
<td>
<input type="radio" name="pipelineType" value="2d" id="2d" checked="checked" onclick="displayType"> 2D Pipleline <br>
<input type="radio" name="pipelineType" value="3d" id="3d" onclick="displayType"> 3D Pipleline </td>
</tr>
<tr>
<td> Project Roles </td>
<td> <input type="checkbox" name="projectRoles" id="animation"value="Animation Clean Up"> Animation Clean Up
<input type="checkbox" name="projectRoles" value="Background Painting"> Background Painting
<input type="checkbox" name="projectRoles" value="Casting & Recording"> Casting & Recording
<input type="checkbox" name="projectRoles" value="Color Styling"> Color Styling
</td>
</tr>
</table>
</div>
</script>
Im new at ember.js, I have the java code in the app.js. Would it be better if it was placed in another js file?
javascrirpt
function displayType() {
if(document.getElementById('2d').checked) {
document.getElementById('animation').disabled = false;
}
else {
document.getElementById('animation').disabled=true;
}
}
Any suggestion would be really helpful. Thanks.

The first thing I noticed is that you have forgotten to make your onclick calls into function calls:
onclick="displayType"
Needs to change to
onclick="displayType()"
Next, when I put your code into a jsfiddle, it was not finding the function because it was not in the global scope. When I changed the function definition from:
function displayType() {
to:
window.displayType = function () {
it solved the problem. This may be different depending on where you put your code.

Try the following to disable it:
document.getElementById('animation').removeAttribute('disabled');

try this solution,
remove <script type="text/x-handlebars" id="createProject"> and its closing tag.
Change your code from onclick="displayType" to onclick="displayType()" in first two radio buttons.

Shorthand, pass a variable to determine which radio button is clicked
function displayType(def) {
var checked = def === '3d';
document.getElementById('animation').disabled = checked;
}
HTML, pass a variable to the javascript function indicating whether its 3d or 2d thats clicked
<input type="radio" name="pipelineType" value="2d" id="2d" checked="checked" onclick="displayType('2d')"> 2D Pipleline <br>
<input type="radio" name="pipelineType" value="3d" id="3d" onclick="displayType('3d')"> 3D Pipleline </td>