I've got a simple semantic-ui checkbox as follows:
<div id="del-checkbox-div" class="ui checkbox">
<input type="hidden" value="0" name="delete_show_data" onclick=check()>
<input id="delete-data-checkbox" type="checkbox" value="1" name="delete_show_data" onclick=check()>
<label for="delete-data-checkbox">Delete show data</label>
</div>
I'd like to preset its state on page load. Per the semantic-ui documentation I should be able to do the following in javascript:
jQuery('#del-checkbox-div').checkbox('behavior', 'uncheck');
However, I'm getting the following error:
TypeError: jQuery(...).checkbox is not a function
Can someone clue me in as to what I might be doing wrong?
So the basic problem was I forgot to enqueue semantic.min.js. Notwithstanding the proper way to set/unset a checkbox is:
jQuery('#del-checkbox-div').checkbox('check');
or
jQuery('#del-checkbox-div').checkbox('uncheck');
Related
i try to write a simple code on view like
<input type="radio" ng-model="optJawab" ng-value="'blabla'" id="blabla"><label for="blabla">blabla</label>
and i succeeded to retrieve at console
console.log(this.optJawab);
and i facing problem with ng-repeat, console on controller said undefined?
code like below.
<div class="divTable" ng-repeat="quest in Questions track by $index">
<input type="radio" ng-model="optJawab[$index]" ng-value="'blabla'" id="blabla">
<label for="blabla">blabla</label>
</div>
change like this,
console.log($scope.optJawab);
I am using angularjs to repeat radio button groups with the following code.
<div class="row observation-point"
ng-repeat="observationPoint in question.observationPointList">
<div class="col-md-6 col-sm-6">
<small>{{observationPoint.text}}</small>
</div>
<div class="col-md-4 col-sm-4 col-md-offset-2 col-sm-offset-2">
<label class="radio-inline">
<input type="radio" ng-disabled="observation.status != 'Open'"
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-1" ng-value="true"
ng-model="observationPoint.observed">{{'observation-domain.html.yes' | translate}} {{observationPoint.observed}}
</label>
<label class="radio-inline">
<input type="radio" ng-disabled="observation.status != 'Open'"
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-0" ng-value="false"
ng-model="observationPoint.observer">{{'observation-domain.html.no' | translate}}
</label>
</div>
</div>
With angular 1.2.28 this worked fine, however we've recently upgraded to 1.4.2 and now the result is as in the picture below.
The model values are correctly saved and restored (see the true and false values in the image) in the variables, but only the last radio button in the ng-repeat is selected after reloading the page.
Why is this happening, because I really don't understand what the problem is and how to fix this.
nb. observationPoint.observer contains a boolean value not a string
EDIT: i've created a simplified plunker and of course this works as intended :S
http://plnkr.co/edit/tWjizHB8I5FNZVOgdq6J?p=preview
Which would suggest something is wrong with the naming or id's.
However when I check with the developer tools id and name seem fine
I've found a solution, if I change the dynamic names from
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
to
name="observationPoint_{{observationPoint.id}}"
it works without a hitch. I presume there is some sort of loading/timing issue going on. The variables are probably not unique at the moment the UI is rendered and causes only the last item to be set.
I am using ng-repeat in angularjs to display several checkboxes.
<div class="checkbox" ng-repeat="subject in priceinformation.subjects">
<label>
<input type="checkbox" ng-model="priceinformation.subscriptioninfo.subject.name"> {{subject.name}}
</label>
</div>
The problem is all the checkboxes are using the same model, hence if I check one, all are checked. I want to do it in a way that the model can resolve to different values. e.g.
ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}"
{{subject.name}} should resolve to something like English, History etc, hence a different model for each checkbox.
But ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}" is giving an error.
Note: {{subject.name}} is resolving correctly used elsewhere, and 'priceinformation.subscriptioninfo.subject' is working correctly.
Use [] instead of .
ng-model="priceinformation.subscriptioninfo[subject.name]"
Plnkr Demo
Script
$scope.priceinformation ={};
$scope.priceinformation.subjects = [{"name":"English"},{"name":"History"},{"name":"Maths"}];
$scope.priceinformation.subscriptioninfo ={};
<div ng-repeat="item in checks">
<input type="checkbox" ng-model="item.checked">{{item.name}}
</div>
See Plunkr
I'm trying to incorporate some of the new features of 1.3 into our app. I have a form and couldn't seem to get ng-messages to work. So I put it in a plunker and I still seem to be doing something wrong. My view looks like this:
<form name="profileForm"
ng-submit="profile.submit(profileForm.$valid)"
novalidate>
<input type="text" name="favoriteNumber"
ng-model="profile.number"
required ng-minlength="5" />
<div class="errors" ng-messages="profileForm.favoriteNumber.$error">
<div ng-message="required">this is required</div>
<div ng-message="minlength">this is too short</div>
</div>
<input type="submit" value="Save" />
</form>
I expected to see only one ng-message tag at a time, but both are present when the page loads.
At least I expect the message to go away as their validation criteria are met, but no matter what I type in the input, both messages are always present. It is as if I didn't include the ng-messages script at all.
What am I doing wrong here?
var app = angular.module("demo", ['ngMessages']);
include ngMessages module in you application module as a dependency.
plunker
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>