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
}
Related
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?
New in AngularJs. Finding it complex a little. I have created two text box and a button. Now I want, first I will write something inside the first text box. Then I will click on the button. After that the value of the first text box will get displayed inside the second text box. I have written very little code, I didn't even mentioned the button click function as I am confused on that. Please help me to go further.
<script src="../../Scripts/angular.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="">
<input type="text" ng-model="type">
<br />
<br />
<input type="button" value="button" onclick="myFunction()" />
<br />
<br />
<input type="text" ng-model="display" />
</div>
</body>
in your controller do ,
$scope.myFunction = function () {
$scope.display = $scope.type;
}
in your html you have to change onclick to ng-click,
<input type="button" value="button" ng-click="myFunction()" />
see this plunk for example, http://plnkr.co/edit/c5Ho1jlixwZFx7pLFm9D?p=preview
Check whether you have included angular js file in your HTML.
//add below snippet in your HTML head tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
I have been wanting to have a radio button checked out of a list of radio buttons that I present in the screen using ng-repeat, but my code does not work. This is what I am doing:
<div class="clubRole" data-ng-if="club.checked">
<div data-ng-repeat="role in securityGroups.slice(0,1)">
<input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode" checked="checked"> {{role.description}}
</div>
<div data-ng-repeat="role in securityGroups.slice(1,securityGroups.length+1)">
<input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode"> {{role.description}}
</div>
</div>
The intention of the code is to get the first radio button checked, and the others unchecked. That code has a problem: it does not work. But at least it gives the idea of what I am trying to do: I want one of the radio buttons checked by default, no matter which one it is.
Radio button will be check if the value of the input attribute is equal to the value of modal applied on the radio button.
<div ng-repeat="val in ['a','b','c']">
<input
type="radio"
name="val"
data-ng-model="role"
data-ng-value="val"
ng-init="$index==0?(role=val):''"
/>
{{val}}
</div>
Checked="checked" will not work in angular context. You can either set the value of radio button explicitly in controller or you can manage it in the view itself as i did in the above example.But the modal should be equate according to the value attribute on the inmput element.
For example if modal is x on three radio button's and each radio button have different value like a,b and c. then x must be equal to any of the value to be checked.
Plunker
You don't need to worry about checked.
HTML:
<div ng-app="app">
<div ng-controller="mainController">
<label ng-repeat="option in options">
<input type="radio" ng-model="$parent.selected" ng-value="option"/>{{option}}
</label>
</div>
</div>
JavaScript:
var appModule = angular.module('app', []);
appModule.controller('mainController', function($scope) {
$scope.selected = 'red';
$scope.options = ['red', 'blue', 'yellow', 'green'];
});
Working fiddle here: https://jsfiddle.net/qnw8ogrk/1/
You don't need checked="checked", I think angular will take care of it itself if you set the model to one of the values. Something like:
club.role = securityGroups.slice(0,1)[0].securityGroupCode;
Also, the scope may trip you up here, the model may have to be $parent.club.role
if you use a primitive type in list, the answer of bm1729 is correct, but if you use objects in the list, then look this example: https://jsfiddle.net/9chd58mk/2/
the first part is bad, because the selected object is look like same with a list item, but it doesn't same by reference. the == operator is false in this case
$scope.selected = {c:'red'};
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
but the second and third examples are use the list item reference, and the radio button checked. the == operator is true in this case
$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
$scope.selected3 = $scope.options3[0];
<md-radio-group ng-model="data.group3">
<md-radio-button value="{{o._id}}" class="md-primary" ng-repeat="o in lstDataRecord" ng-click="updTemplateId(o._id)">
<div flex-gt-sm="50" style="height: 150px; width: 250px;">
<img src="{{PageInfo_PATH}}{{o.imgUrl}}" />
{{o.displayName}}
</div>
</md-radio-button>
<md-radio-button value="active" class="md-primary" [checked]='true'> </md-radio-button>
</md-radio-group>
<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.
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>