I'm working on system where I have an ng-repeat populating from an array of elements, with a radio buttons setting a property. When it loads in, none of the radio buttons are selected, but when I select any of the radio buttons, it binds to the model appropriately. It works in a single format without the outer ng-repeat, so I'm not sure why it refuses to select the radio button from the model.
<div ng-repeat="selectedTag in selectedGroup.tags track by $index" ng-controller="ThemesEdit_TagStylesCtrl">
<div class="type-select">
<label ng-repeat="styleGroup in styleGroups.list" ng-hide="styleGroup.name == 'Settings'">
<input type="radio" name="tagType" ng-model="selectedTag.styleGroupId" ng-value="styleGroup.styleGroupId"/> <span>{{styleGroup.name}}</span>
</label>
</div>
<div ng-include src="another_page"></div>
<div class="clear-float"></div>
<p tag-example="selectedTag" data-style-group="styleGroup"></p>
</div>
I can see that the $parent.selectedTag.styleGroupId comes through on each selectedTag, and it triggers the options in the template that is brought in with ng-include, so I know that is pretty close to working properly. The only remaining issue seems to be that it doesn't automatically select a radio button with a defined ng-model.
I'm fairly new to angular, so it could be something completely obvious, but I was hoping someone could light my way. Thank you for any and all help!
Edit: Updated with two suggestions below. Still no joy, but thought I'd edit the code to the most current iteration.
I would say the solution is ng-value="styleGroup.styleGroupId", documentation here.
I feel pretty dumb - it was something simple that I overlooked. With a single instance, publishing with the name set in <input type="radio" name="tagType" ng-model="selectedTag.styleGroupId" ng-value="styleGroup.styleGroupId"/> <span>{{styleGroup.name}}</span>" worked fine. Once I stuffed it in an ng-repeat, it was publishing under the same name="tagType" and overwriting the selection. Sure enough, when I scrolled to the bottom of my page, the last set of radio buttons were checked appropriately.
Checking the docs, the name is optional, and removing it allowed all the radio button sets to populate properly. I haven't seen any ill effects on anything else - is there anything I should be watching for?
Thanks for the help/thoughts, everyone!
I think you should use ng-model="selectedTag.styleGroupId". selectedTag shouldn't be overwritten by your inner ng-repeat.
UPDATE:
Have a look at this SO answer ng-value needs to be set true.
Related
I have a checkbox that is updated from the model, but then the model is not updated clicking the checkbox.
Within a form I have:
<input type="checkbox" ng-model="acceptEula"> I have read the EULA and I agree
<button type="submit" ng-click="pay()" translate>Proceed to Pay</button>
{{acceptEula}}
Clicking the checkbox, I can see how {{acceptEula}} shows true or false, it works.
When I click the button, I put a breakdown in pay() function. $scope.acceptEula is always false. What could be the problem?
Sorry, the question was not detailed in order to simplify the problem. In reality, I used "ng-switch" in the form.
Finally I have found the problem: "This is a scope inheritance problem due to ng-switch creating it's own scope.". It is well explained at angularjs - ng-switch does not bind ng-model
The solution is to use dot in the model, for example $scope.form.acceptEula
As a code is better than 1000 words, I've created a plunker in order to show my problem:
http://bit.ly/1uiR2wy
Given the specific DOM element, thing is that I have an input checkbox with an ng-change, I want to add an ng-click to the li that wraps it in order to be able to click in the whole area.
This new ng-click makes the method in the ng-change to happens twice. And is even worse for an SPAN DESCRIPTION 2 that is happening 3 times.
<li class="odd" ng-click="changeToggleModel($event)">
<span class="overcomeDescription ellipsis-overflow">span description</span>
<label>
<span>SPAN DESCRIPTION 2</span>
<input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
</label>
</li>
I've tried with stopPropagation and it seems that it doesn't solve the issue.
Any ideas about it?
If you check the plunker and open the console you'll see the issue perfectly.
Thanks in advance to everyone
You need to stop event propagation on label level. Try this:
<label ng-click="$event.stopPropagation()" ...>
Demo: http://plnkr.co/edit/AjD9GlA3zjxABix6hegg?p=preview
The reason why it happens is that the label (connected to corresponding checkbox) sort of generates one more click event in order to pass click to the input. This click event causes described strange issues, because it still bubbles like normal event (well it is normal event), and hence is detected by ngClick directives.
Late to the party but encountered the same issue- it seems like AngularJS propagates the click event separately and explicitly. Instead of stopping propagation on the label, you can catch it on the input explicitly:
<input
type="checkbox"
ng-click="$event.stopPropagation()"
ng-change="toggleSelection($event)"
ng-model="isSelected"
>
For a project I'm working on at the moment, I need to have styles which aren't supported on regular checkbox elements.
To work around this I've created an angular directive which recreates the checkbox functionality. While this is working for me, I do question that I'm using the correct html markup as something doesn't feel right about what I've got.
Traditionally you'd use something like this for a checkbox with a label:
<label>
<input type="checkbox" /> Click to check
</label>
and by clicking on the label it'd toggle the checkbox.
Since I'd like to replicate this functionality with angular, I've knocked up a demo here that I believe does the trick but I wonder if I'm missing something? I suppose it's worth mentioning that screen readers are not an issue with this project. I also considered how this may render on mobile devices but since it's only a checkbox it should work correctly.
Have I approached this correctly or am I doing something hideously wrong here?
I think you don't need scope variables you defined in directive.
{elementId: '#', isChecked:'=?'}
By the way, what did you want to tell with those '=?' ? Actually it goes 'typeOfVariableConnection'+'attributeName'. So by your way, it should accept two-way binding with attribute named '?'. I don't think such attribute name is allowed by HTML specification.
But you will need value of checkbox outside the my-checkbox directive, so it will be a good idea to pass some scope variable to that directive to have access to it's value in controller.
I've changed plunker a little bit, connected native checkbox and your own by same model value. http://plnkr.co/edit/bJF1uggJjksiRT7Zkj9M?p=preview
What I'm trying to do is make a number of dynamic radio/checkbox fields based on data that is passed to me. Unfortunately I don't have control over the format of this data but it should be ok to get the job done.
This is as far as I have got: http://plnkr.co/edit/LKwueHUzSrC5JpeBY9So
The format of the data I need to end up with in the end is a simple array like this:
"school_type": [
"Government/State",
"International",
"Co-educational"
]
This data could come from a radio box, or a checkbox if it's selected. Checkboxes are displayed if there is only one option, radios if more than one.
So I can get the fields displaying, but the issues I have are:
The name properties on the radio buttons don't seem to work for
each set.
I can't work out how to get the value of the checkbox/radio selected... back to the controller and into the array I need. I thought the easiest way would be to use the ng-change property available and pass a function to this but I keep getting errors every way I try.
Any help would be appreciated.
There's a couple of problems with your code:
You're not using interpolation where it is needed;
You're not binding the controls to the scope;
Here's your updated code:
<label ng-switch-when="r" class="radio">
<div ng-repeat="option in options">
<input type="radio" name="{{fieldname}}" ng-model="$parent.$parent.selectedid" value="{{option}}">
<span>{{ option }}</span>
</div>
</label>
<label ng-switch-when="c" class="checkbox">
<input type="checkbox" name="{{fieldname}}" ng-false-value="" ng-true-value="{{options[0]}}" ng-model="$parent.selectedid">
<span>{{ options[0] }}</span>
</label>
Note that in order to bind the controls correctly I had to use $parent.$parent for the radio buttons and $parent for the checkbox. That was needed because both ng-switch and ng-repeatcreate new child scopes. So I had to go up one level for the checkbox and two ones for the radio buttons. That could be avoided if you used an object instead of primitives for the bindings. I suggest that you try to refactor your code so it does that. This article has more information on that matter.
And finally, here's a working version of your Plunker.
I noticed that on certain websites, if you want to tick a checkbox on or off, you just need to click the corresponding text. When I put a checkbox with some descriptive text on my page, I have to actually hit the checkbox for it to get ticked. How is the former effect achieved?
Consider using a <label> as in this example:
<input type="checkbox" name="call" id="willcall">
<label for="willcall">click on this text to select the checkbox</label>
This example from: http://www.askdavetaylor.com/make_text_adjacent_to_checkbox_clickable.html
I'm sure that they use a JS script to achieve this. It's most likely a label that is being clicked, and they might add an onclick() event to the label which uses the javascript to find the checkbox and add the CHECKED attribute to it. Sorry for not supplying code, but I hope that gives you some understanding on what those websites do.