I'm trying to do checkbox in Semantic UI, but it doesn't work and I can't figure out what I'm doing wrong.
I'm including jquery, semantic.min.js, checkbox.js and semantic.min.css, then I add this code:
$('.ui.checkbox')
.checkbox()
;
There is console output, but image of checkbox doesn't change.
I've solved this problem to write jQuery's code like this:
$(document).ready(
function () {
$('.ui.checkbox')
.checkbox()
;
});
Did you wrap it on proper Div tags?
<div class="ui checkbox">
<input type="checkbox" name="fun">
<label>I enjoy having fun</label>
</div>
you have to mask the original checkbox like this
<div class="ui checkbox">
<input name="subscribe" type="checkbox">
<label>Subscribe to Email News letters</label>
</div>
Related
I have a html as follows
<input ng-required="true" ng-model="Email" type="text" value="">
and i have a div as follows:
<div id="invalid" style="display: none">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
How can i make it that as soon as the user types in the input then the div is no longer visible or hidden using Angularjs. I know i need to use ng-show or hide but i cant seem to figure out how to put it together with the input ?
If you are using components it will look like this:
<div id="invalid" data-ng-hide="$ctrl.Email">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
If you are using old controller style:
<div id="invalid" data-ng-hide="Email">
<strong><i class="mycustomclass" ></i>Invalid</strong>
</div>
So, I have two toggle buttons, the user must be able only to select one of the above two toggle buttons as show in the image below:
How can I achieve this ?
You can use Radio buttons : http://ionicframework.com/docs/v1/components/#radio-buttons
But if you want to use toggle button and achieve this thing, you can use $watch : Documentation
Ionic code:
<label class="toggle">Bride only
<input type="checkbox" ng-model="B">
<div class="track">
<div class="handle"></div>
</div>
</label>
<br>
<label class="toggle">Bride & Bridesmaids
<input type="checkbox" ng-model="B&B">
<div class="track">
<div class="handle"></div>
</div>
</label>
Angular code:
$scope.B=false; // for Bride only
$scope.B&b= false //for Bride and Bridesmaids
$scope.$watch('B',function(){
if($scope.B==true){
$scope.B&B=false;
console.log($scope.B&B);
}
});
$scope.$watch('B&B',function(){
if($scope.B&B==true){
$scope.B=false;
console.log($scope.B);
}
});
Hope this helps.
I try to operate with AngularJS on checkbox made with Semantic UI:
<div class="ui checkbox" ng-click="myCtrl.value=!myCtrl.value">
<input type="checkbox" class="hidden" ng-model="myCtrl.value"/>
<label>Property</label>
</div>
It looks, like any copy of my Semantic-ui checkbox needs to be "activated" by a click. First click is changing the value, but not the appearance. Then my Semantic-ui checkbox is always one step behind - it shows the opposite state to the one saved under "value" variable.
I noticed, that as I use "normal" checkbox, clicking on the label works fine, but clicking on the input change it's state twice (returns to the first state):
<div ng-click="myCtrl.value=!myCtrl.value">
<label><input type="checkbox" ng-model="myCtrl.value"/> Property</label>
</div>
This is probably something really basic, but as I am working on my first Angular project ever, really basic things are still really big problems:) Thank you.
I simply removed the hidden class on the input
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="ui checkbox" ng-click="myCtrl.value=!myCtrl.value">
<input type="checkbox" ng-model="myCtrl.value" />
<label>Property</label>
</div>
Semantic's JS often doesn't play nicely with Angular.
You may need to set the checkbox's appearance explicitly in the controller.
<div class="ui checkbox" ng-click="setValue()">
<input type="checkbox" class="hidden" ng-model="myCtrl.value"/>
<label>Property</label>
</div>
And then in your controller:
myCtrl.setValue = function() {
myCtrl.value = !myCtrl.value; // sets value
$('.ui.checkbox').checkbox(myCtrl.value ? 'check' : 'uncheck'); // updates checkbox appearance to match
}
Should be simple - what am I doing incorrectly?
In my controller:
$scope.eventShow = {tab: 'stations'};
and, in a view:
Show:
<span>
<label>Stations</label>
<input type="radio" ng-model="eventShow.tab" value="stations" class="check_box" />
</span>
<span>
<label>Visitors</label>
<input type="radio" ng-model="eventShow.tab" value="visitors" class="check_box" />
</span>
I want the radio buttons to toggle, when one is clicked, and $scope.eventShow.tab to be updated appropriately
Your code is working correctly for me. what version of angular are you using? I am using this:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
or is it possible you do not have ng-controller in the html?
<body ng-app="debounceExample">
<div ng-controller="ExampleController">
<form name="form" ng-submit="go()" novalidate>
<label>Name:</label>
<input name="input" type="text" required ng-model="user" /><br />
<div ng-messages="form.input.$error" ng-show="form.input.$touched">
<div ng-message="required">required</div>
</div>
test
</form>
</div>
</body>
Please focus input field and click on anchor tag. You can see, the anchor tag click is not working as the input field validation is triggered on blur. I am seeing the issue is due to using form.input.$touched in ng-show. I have created a plunker to reproduce the issue.
http://plnkr.co/edit/0NMhxP18EhBjLyKrJQV5?p=preview
To reproduce the issue, first focus input field and then click on anchor tag.
If you change the ng-show to
ng-show="!form.input.$pristine"
You may get the behaviour that you want.
Here is an updated plnkr.
You can remove the href='' from your anchor tag. It's also working fine even in your plunkr so I'm not sure what is the actual problem. A form has its own scope, so if you try something like
<a ng-click='myVar = !myVar'>click me</a>
and you set myVar=false outside the form it won't work. You would need $parent.myVar, but that isn't the case here.