We Keep Coding

Multiple radio input checked

My problem seems quite simple but i can't see what's going wrong.
I am just trying to have a simple multiple-choice form with only one choice possible, with the help of radio inputs.
I am using a loop with Mustache.js and I believe it prevents it from working, because I can select every input at the same time
Here's the code
<ul class="list-group mongroupe">{{#liens}}<form>
<li class="list-group-item"><div onclick="sessionStorage['idpatient']='{{patient}}'">
<input type="radio" name="listemp" value={{patient}}/><h2> {{patient}} </h2> </div>
</li></form>
{{/liens}}
</ul>
Even though the inputs have the same name (others questions take this for a solution).
I'd thankful for a hint on how to solve this.

Move the form outside the ul or at least outside the #liens block. Your rendered HTML probably has one form for each radio button which means each radio is alone in it's own group.

ng-class evaluation with ng-repeat in angular

I am trying to add red frame to a field in a form in angular.
When working with static fields (not populated with ng-repeat) everything is working good. When the field is created with ng-repeat looks like the ng-class that uses the current index is not working. The form state is correct but the class with the red frame is not added to the field.
See this Plunker: http://plnkr.co/edit/hDfTHY?p=preview
When adding a value to all input fields the button become enabled. However, only first input is red when empty.
Thanks

One option is to add inner form:
<div ng-form="nested" class="col-md-4" ng-class="{'has-error': nested.item.$invalid}">
<input type="text"
ng-model="item"
class="form-control"
name="item"
id="item{{$index}}"
required ng-minlength="2">
</div>
See this question

Using angularjs to create horizontal radio buttons

I am building a set of radio buttons using the ngRepeat directive and I need to make it horizontal. I'm not sure it's possible to do that with ngRepeat, since each instance gets its own scope. The below structure creates a new div for each item in the options array and they're displayed vertically.
<div ng-repeat="option in options">
<input type="radio" role="radio" />
<span>label</span>
</div>
Does anyone know any tricks for creating horizontal radio buttons?

Angular doesn't really affect style in this way. Give your div float:left or display:inline-block in its style.

It should be noted that AngularJS from version 1.1.6 up allows one to do this much more cleanly:
Assume
$scope.data = [{val:0,txt:'Foo'},{val:1,txt:'Bar'},{val:2,txt:'Baz'}];
then you can use repeat-start and repeat-end like this:
<input ng-repeat-start="item in data" type="radio" value="{{item.val}}">
<span ng-repeat-end>{{item.txt}}</span>
Demo here: http://jsfiddle.net/rWLfZ/

Replacing Radio Box with image (Javascript or Jquery)

I am currently overlaying a radio box on top of a unique image (found help here on stackoverflow: How can I display the checkbox over the images for selection? and http://jsfiddle.net/erSBP/1/) and it's working like the example.
However, I would like to remove the radio box so that only the unique image remains and is clickable and sends the checked value just as a normal radio button would.
The radio box input ID's are generated dynamically so I can't specify what they are named.
Is there any way to do this with Javascript or JQuery?
My current configuration is:
<div class="answer">
<div class="answer-image">
<img style="border-width:0px;" src="/images/white.jpg">
</div>
<input id="Questions8404" type="radio" onclick="javascript:setTimeout('__doPostBack(\'965968404\',\'\')', 0)" value="8404" name="96596">
</div>

Your code is messed up. Firstly, don;t use setimeout. Just call dopostback. Secondly, you're using a javascript url on an onlick attribute. Don't do that unless you calling it through the href attribute for who knows what reason. All in all, don't use javascript urls. Here's what your code should look like
<div class="answer">
<div class="answer-image">
<img style="border-width:0px;" src="/images/white.jpg">
</div>
<input id="Questions8404" type="radio" onclick="__doPostBack(\'965968404\',\'\')" value="8404" name="96596">
</div>

If you were looking to do this with a checkbox, you could do something like this with jquery​
$(document).ready(function () {
$(".answer").each(function() {
var p = $(this).find("input:checkbox");
p.hide();
$(this).find("img").click(function() {
p.prop("checked", true);
});
});
});
As this will set the input to hidden, and trigger a click event to select the checkbox. It will match the Image and the Input as contained in same "answer" div. You could adapt this to work with a radio, you would just need to know which option you wanted to select.

Hidden fields in AngularJs

How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.
I updated the default angular example to display the situation - the todo text is in hidden field.
http://jsfiddle.net/tomasfejfar/yFrze/

If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS

If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:
For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} read more
</li>
</ul>
Then in your JS code, you can get the ID like this:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}

In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The value attribute won't effect the ng-model.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.

You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"
<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
$scope.processForm = function() {alert("processForm() called.");
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("form").name;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
};
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>
This allows You to use ONE Controller for ALL forms and send
them to ONE server script.
The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.
Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.

Simpler:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
It works!

Use ng-binding="{{employee.data}}". It will work properly.

I have to correct (improve) myself:
You can do it more elegantly:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
and then in the JavaScript controller:
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
So you can have as many hidden fields as you like.