I use angular and the bootstrap-switch plugin in my application. It works like this:
<input type="checkbox" name="my-checkbox" checked>
<script>$("[name='my-checkbox']").bootstrapSwitch("size", "small");</script>
The problem is that if I want to use all the attributes I found there it doesn't work.
How can I use ng-model with my switch?
I would like to use it like this:
<input type="checkbox" name="my-checkbox" checked="variableStatus" data-on-color="success" data-off-color="warning">
or
<input type="checkbox" name="my-checkbox" ng-model="variableStatus" data-on-color="success" data-off-color="warning">
The most obvious reason that it's not working is that bootstrap-switch is a jQuery library. Angular doesn't play well with jQuery, so if you want to use it, you'll have to write your own directive. However, the following link will give you a directive someone wrote called angular-bootstrap-switch. You might want to check it out.
https://github.com/frapontillo/angular-bootstrap-switch
Bootstrap has special method for starting, if you want start it, try it start after period time in angularjs.
setTimeout(installSwitcher, 1000);
function installSwitcher(){
$("[name='my-checkbox']").bootstrapSwitch();
}
<input type="checkbox" name="my-checkbox" checked>
Related
What I want:
<input class="form-control" type="number" spinner ng-model="$scope.someNumber"/>
<!-- notice the `spinner` directive -->
What I have:
<input class="form-control" type="number" ng-model="$scope.someNumber"/>
Are there directives for better number spinners?
I've tried searching Google, but I'm not finding anything (spinner is also used to refer to a loading image, so perhaps I'm using the wrong terminology).
I created a directive special for you:
You can customize it as you want
<number-spin data-ng-model="vm.testNumber"></number-spin>
Here the jsfiddle
P.S. I added directive to npmjs here the link,
also github and demos
I'm trying to use an input type search like this:
<input type="search" ng-model="main.toSearch" placeholder="Search..." class="search-input" onsearch="main.doSearch()"></input>
main is my controller (I'm declaring it as "MainController as main "). The binding to main.toSearch works fine, but main.doSearch never gets called. If I put some random javascript it gets called, but it seems to not find main.
Can anyone please explain what am I doing wrong?
Thanks
onsearch="main.doSearch()" doesn't look right. You need to use angular directives to call methods attached to your scope.
Do you have a $scope.main.doSearch() method? If you want to call the method when the user presses the Enter key you can put it in a <form> element and use the ngSubmit directive:
<form ng-submit="main.doSearch()">
<input type="search" ng-model="main.toSearch" placeholder="Search..." class="search-input"></input>
</form>
For onsearch to work, main must be a global object which you should avoid.
Please look at this pen for an example:
http://codepen.io/argelius/pen/ByyjKe
Checkbox is not updating while
<input type="checkbox" ng-repeat="status in statuses"
checklist-model="task.status"
checklist-value="status">
In plunker
Isn't that 2 and 3(in plunker) are similar? Any Idea.
The problem is that you're using ng-repeat on the INPUT tag. You should put INPUT inside the ng-repeat. The checklist-model directive should have a separate scope.
All the official document example to use it within label. And my guess is that, the statement
<input type="checkbox"
checklist-model="task.status"
checklist-value="status">
is an iterating one. And if you add another iteration to it(ng-repeat) to it, it doesn't look logical.
I am trying to do validation with angular and Bootstrap but for some reasons ng-pattern validation is not working in Zip Code. Any help will be great in this.
Here's FIDDLE LINK
Not able to paste full code, but here is how I am attempting to use the ng-pattern directive:
<input type="text" class="form-control" id="zipCode" name="zipCode"
ng-model="auth.zip" ng-pattern="^(\d{5}-\d{4}|\d{5})$" required="">
The problem is that when you place the pattern inline instead of a scope variable it expects / around the regex, like a litteral.
Like this:
/^(\d{5}-\d{4}|\d{5})$/
Fiddle
See the input docs, check out the arguments section then ngPattern
Hi you can use like this
$scope.zipNumbr = /^[0-9]{1,6}$/;
I'm trying to use Angularjs's built in form validation, but when I add a required field to a checkbox to make sure its checked I get odd results. If I do the opposite of the value I'd like it seems to work fine. The following fiddle will explain it more thoroughly.
This fiddle works great when you're using Angularjs 1.0.4, but if you switch Angular to 1.2.1 it breaks all over the place. Is there a new way of doing this now? or would this be considered a bug?
EDIT
I simplified the code to make it make more sense, check out this fiddle. The key problem here is that it's doing the opposite of what I would like it to do, but if I switch it the entire thing falls apart. I've also replaced the older code I had here with the newer fiddle. You can still see the older fiddle code in the above link.
Here is the html:
<div ng-controller="myCtrl">
<ng-form name="myForm">
<input type="checkbox" ng-model="value.checkbox" name="group-one" ng-true-value="1" ng-false-value="0" ng-required="value.checkbox==1" />
<input type="submit" value="Send" ng-disabled="myForm.$invalid" />
{{choice}}
</ng-form>
</div>
Here is the controller:
function myCtrl($scope) {
$scope.value = {"checkbox":""};
}
This appears the be a bug, though I'm not sure it's the same as your original problem. The required directive is not functioning properly when an ng-true-value is specified.
Found an existing bug report.
If you use ng-click, you should pass $event in and then get the choice from $event. Or you can use ng-checked to get the value directly.
ng-click="updateQuestionValue($event)"
$scope.updateQuestionValue = function($event){
var choice = $event.target;
//...
}