I found some article explaining why ng-change may not fire in a repeat, but I think I tried everything I can do and my ng-change is still not firing.
I made a demo here
<input type="radio" ng-model="select" name="names"
ng-change="$parent.$parent.$parent.noSelected(select)">
I included a model and tried various $parent.$parent but still it wasn't firing.
Can someone tell me what went wrong with my example?
The radio button code you have listed is in a template, that is being consumed by a directive. That directive does not have access to your controller scope, as the scope is isolated deliberately.
You need to look thoroughly at the smart-table documentation to achieve what you are trying to do.
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
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!
Quick questions. Im generating part of a form dynamically, namely the radio buttons part and I am using an ng-repeat. To do this I have the following code to loop through and list the radio button options:
<div ng-repeat="choice in question.choices">
<input name="{{q.name}}" type="radio" value={{choice.id}} ng-model="choice_[q.answer]" required /> {{choice.choice}}
</div>
I have two issues with this, firstly, im not sure if I am correctly assigning my ng-model dynamically.
Secondly once the model is created it seems to be in its own scope and unusable outside of the repeat due to it being encapsulated within the repeat div.
Is there a way I would be able to access this model? perhaps just passing it through the parent scope using $parent or so?
Any help would be appreciated.
Thanks
I created a plunker to show how to access your model:
Model access demo
<input type="radio" value={{choice.id}} ng-model="$parent.choice" required /> {{choice.choice}}
I used the same model name for every input in the repeat. This way whichever input is selected becomes the active model. That should solve your model naming issue.
Secondly, ng-repeat creates a scope for every template it produces, so you do want to use $parent to access the model on your controllers scope.
I'm working on single-page web app using angularjs.
I'm using NGSwitchery directive for checkbox.
I want to handle an on-change event when user switching the NGSwitchery control.
I tried to attach ng-model and ng-change, but it's not working.
Is there any way?
Following is the code I tried.
Template
<input type="checkbox" id="socialsharing_facebook" class="js-switch" ui-switch ng-model="user.enable_facebook" ng-checked="user.enable_facebook == 1" ng-change="updateUser()" />
updateUser() isn't called, when I change switch.
I haven't used NGSwitchery, but usually you can just watch the model from your controller. The nice thing about that is that if the model changes by some other means, you will be notified of that too. Something like this:
$scope.$watch("user.enable_facebook", $scope.updateUser);
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