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"/>

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

how to add dynamic name in radio button using vue js

How can I add dynamic name in radio button?
<tr v-for="user in users">
<td>
<input type="radio" :name="groups_[[ user.id ]]" v-bind:value="photographer" v-bind:checked="user.group.name == photographer"> <label>photographer</label>
<input type="radio" :name="groups_[[ user.id ]]" v-bind:value="client" v-bind:checked="user.group.name == client"> <label>client</label>
</td>
</tr>
When I tried my code above it gives me an error
Property or method "groups_" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Convert the groups_ to string by adding single quote.. then add plus sign (+) to concatenate the groups_ string to the user id.
<input type="radio" :name="'groups_' + user.id" v-bind:value="photographer" v-bind:checked="user.group.name == photographer"> <label>photographer</label>
<input type="radio" :name="'groups_' + user.id" v-bind:value="client" v-bind:checked="user.group.name == client"> <label>client</label>

how can I validate multiple ng-repeated ng-form

I have a variable form list and want to display validation error messages outside of the list elements.
consider this template:
<form name="gForm">
<table>
<tr ng-repeat="invoice in invoices" ng-form="invoiceForm">
<td><input name="amount" type="number" max="200" /></td>
</tr>
</table>
<div ng-show="gForm.invoiceForm.amount.$invalid">you must the money</div>
<button ng-click="addInvoice()">add invoice</button>
</form>
the validation error would only be displayed when the last ng-repeat is invalid. Put another way, gForm.invoiceForm points to the lastly created form in ng-repeat.
I've seen other questions related to this problem but they only suggest repeating the validation messages inside the ng-repeat. I need the message to be outside and displayed once only.

The way you have it, gForm.invoiceForm does refer to the last <tr> in ng-repeat.
If you want to display the error when any of the amounts is invalid, you can use gForm.$invalid. In fact there is no need to use ng-form="invoiceForm" unless there are more requirements not evident from the current question's code.
Another problem is that, in order for Angular to recognize the input and apply its directive (and its magic consequently), the ng-model directive is required as well.
Adding the ng-model directive and changing the condition to gForm.$invalid solves the problem:
...
<tr ng-repeat="invoice in invoices">
<td><input name="amount" type="number" max="200"
ng-model="invoice.amount" /></td>
</tr>
...
<div ng-show="gForm.$invalid">you must the money</div>
...
See, also, this short demo.

Are you looking for something like this? Yes you need to use ng-model, but also you need a unique name:
<div ng-app="pageModule"
ng-controller="parentCtrl">
<form name="gForm">
<table>
<tr ng-repeat="invoice in invoices" ng-form="invoiceForm">
<td>{{invoice.name}}: <input name="invoice.name" required type="number" max="200" ng-model="invoice.amount" /></th>
</tr>
</table>
<div ng-show="gForm.$invalid && showError">you must the money</div>
<button ng-click="addInvoice()">add invoice</button>
</form>
</div>
<script>
var pageModule = angular.module('pageModule',[])
.controller('parentCtrl',function($scope) {
$scope.invoices = [
{ name : 'ford' },
{ name : 'chevy' },
{ name : 'honda' },
]
$scope.showError = false;
$scope.addInvoice = function() {
$scope.showError = true;
console.log('add invoice');
}
})
</script>

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>