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
Related
I'm using a check box in the heading of the accordion control in bootstrap, but the model will only update the first time it's clicked. Here's the HTML for the accordion:
<accordion ng-repeat="timesheet in timesheets">
<accordion-group>
<accordion-heading>
Title
<input type="checkbox" ng-model="approvals.rejected" ng-click="approvals.timesheetChecked($event)"/>
</accordion-heading>
</accordion-group>
</accordion>
the click method is in my typescript controller:
timesheetChecked($event: Event) {
$event.stopPropagation();
$event.preventDefault();
}
If I just use the stopPropagation() method by itself it updates the model correctly and the check box is checked, however, it will then refresh the page. The preventDefault() method stops this from happening, but then it will then only update the model once and not check the check box.
I have tried using ng-bind and that will actually update the model with correctly, but it will not change the check box to checked.
If I use the check box outside of the accordion it works as expected and I have no problems with it. I'm not really sure what I am doing wrong here?
I believe your code would work, but it only works with Angularjs 1.2.x and ui-bootstrap-tpls version 0.11 (earlier versions may work).
Your code is similar to the following post...
https://stackoverflow.com/a/24502123/3807872
If you are using Angular 1.3.x, then you will want to add the stop propagation inside of the ng-click...
<input type="checkbox" ng-model="approvals.rejected" ng-click="approvals.timesheetChecked($event);$event.stopPropagation();"/>
This example was in thanks to the following post...
https://stackoverflow.com/a/14545010/3807872
This really worked for my situation as well.
By the way, I don't know if you have fixed this issue but I have the same problem, however for displaying the right checked checkbox I've added this:
ng-checked="approvals.rejected == 'true'"
and I only stopPropagation method.
But actually it doesn't work for the first click!
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.
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
I have having some trouble utilizing the angular bootstrap-ui btn-checkbox directive and its interaction with a ng-repeat directive. The way the directive appears to be setup is that you have to manually name each individual model for a multi checkbox scenario, which is either not possible within an ng-repeat or I haven't found how to accomplish this.
I found an answer somewhat similar to this issue:
Setting and getting bootstrap radio button inside angular repeat loop
and forked the plunker to better explain exactly what I am seeing as a problem.
The plunker can be viewed:
http://plnkr.co/edit/ddiH78pzqE3fsSoq8gAr?p=preview
The answer you linked is the same solution for this problem. Each button within the repeat needs it's own unique property of the model. If they are all set to the same model, as in the plunk $scope.checkboxModel = {id: 0}, when one button is checked, they will all be checked.
So to give each button uniqueness, you could set another property onto the objects within the ng-repeat. This property would hold a boolean value that changes on check. So your model would look like:
$scope.companies = [{"id":2,"name":"A", truthy:false}] // and so on
You would not need to explicitly set this in the controller - just declare the new property right in the button element's model:
<companies ng-repeat="company in companies">
<button type="button" class="btn" ng-model="company.truthy"
btn-checkbox>{{company.name}}</button>
</companies>
Here's the plunk
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.