How do I add a checkbox to a widget in AngularJS?
I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).
What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:
<div data-ng-if="widget.name === 'umw-tag-box'">
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
<div class="col-sm-8">
<tags-input max-tags="1"
min-length="1"
key-property="tag"
display-property="tag"
template="tagItem.html"
um-max-tags-strict="true"
data-ng-model="widget.tag"
placeholder="Start typing a tag name"
replace-spaces-with-dashes="false"
on-tag-adding="onAddingTagItem($tag)"
on-tag-added="warning.tag = undefined"
um-tags-input-warning="{{warning.tag}}"
data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
<auto-complete min-length="1"
load-on-focus="true"
load-on-empty="true"
display-property="tag"
template="autocomplete.html"
source="autocompleteTagsFilter($query)">
</auto-complete>
</tags-input>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
<div class="col-sm-8">
<um-color-picker color="widget.color"></um-color-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
<div class="col-sm-8 ">
<um-icon-picker icon="widget.icon"></um-icon-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ng-model="widget.flip">
<span></span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="row" ul-scroll-modal-to-me="focusDesc">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" ng-model="widget.description"
data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
</div>
</div>
</div>
</div>
Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...
<div class="row ui-checkbox-row">
I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...
What is the best way to add a checkbox to the widget?
Edit
I tried adding a function inside the link function in the JS that would add/ display the checkbox on the page, but this doesn't seem to have made a difference to what's displayed in the browser:
.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
return {
...
template: ...
...
link: function($scope, $element){
...
var setTagValue = function(tag){
...
//This is the code I added:
angular.module('showAlarmsCheckbox', [])
.controller('alarmsController', ['$scope', function($scope){
$scope.checkBoxMode1 = {
value1 : true,
value2 : 'YES'
};
}]);
...
};
...
}
}
})
Is there something I'm missing here/ something I'm doing wrong?
Related
Im using angular 1 for the data binding from the form to the next view using the routing module to display the html structure form the different files, it i have all the html code in one file the prototype works perfect, but when i use the routing module the data is not binding through the links,
In the following link im using only css for the transitions so all the html is in one file and not using the routing module and there it works http://jspmultimedia.com/angular-cv-css/#form
and in the next link is where is not working using the routing module
to pass the data from the form to be displayed in the next view.
http://jspmultimedia.com/angular-cv-route/#!/form
var app = angular.module("myApp", ["ngRoute"]);
//Routing for display and URLS
app.config(function($routeProvider) {
$routeProvider
.when("/", {
controller : 'myCtrl',
templateUrl : 'dashboard.htm'
})
.when("/form", {
controller : 'myCtrl',
templateUrl : 'form.htm'
})
.when("/result", {
controller : 'myCtrl',
templateUrl : 'resultdashboard.htm'
})
.otherwise({ redirectTo: 'dashboard.htm'});
});
//scope for select list (position)
app.controller('myCtrl', function($scope) {
$scope.position = [
"Front-end Web Developer",
"Back-end Web Developer",
"UI / UE Designer"
]
//add skills
$scope.skills = [];
$scope.addItem = function () {
$scope.skills.push($scope.addMe);
}
//remove skills
$scope.removeItem = function (x) {
$scope.skills.splice(x, 1);
}
});
this is the form.htm
<!-- FORM -->
<form id="form">
<div class="form-group row"><!-- Name -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">First Name(s)</label>
<div class="col-10">
<input type="text" ng-model="name" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="John" value="Javier Smith Paterson">
</div>
</div>
<div class="form-group row"><!-- Last Name -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Last Name(s)</label>
<div class="col-10">
<input type="text" ng-model="lastName" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="Smith Paterson" value="Javier Smith Paterson">
</div>
</div>
<div class="form-group row"><!-- Short Description -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Cover Letter</label>
<div class="col-10">
<textarea ng-model="shortDescription" class="form-control" id="exampleTextarea" rows="3" placeholder="A Short description of what you can ofer"></textarea>
</div>
</div>
<div class="form-group row"><!-- select Position to apply -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Position to Apply</label>
<div class="col-10">
<select ng-model="selectedPosition" class="form-control form-control-lg">
<option value="" selected disabled hidden>Choose here</option>
<option ng-repeat="x in position" value="{{x}}">{{x}}</option>
</select>
</div>
</div>
<div class="form-group row"><!-- add skills -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Main Skills</label>
<div class="col-4">
<ul>
<li ng-repeat="x in skills" class="col-1">{{x}}<div class="col-1">
<span ng-click="removeItem($index)" style="cursor:pointer;">×</span>
</div>
</li>
</ul>
<input class="form-control" ng-model="addMe">
<button ng-click="addItem()" class="btn btn-primary">Add</button>
</div>
<div class="clearfix">
</div>
<div class="image-upload"> <!-- Image Upload preview -->
<input type="file" class="form-control-file" onchange="readURL(this);" />
<img id="preview-img" src="http://placehold.it/180" alt="your image" />
</div>
</div>
<!-- FINISH CTA-->
Finish
</form>
and at last the resultdashboard.htm
<!-- Result dashboard CV -->
<div id="resultDashboard">
<div class="row col-12">
<div class="col-3">
<img src="http://placehold.it/18" class="rounded-circle" id="resDashImg" alt="photo image of {{name + " " + lastName}}" title="{{name + " "+ lastName}}">
</div>
<div class="col-6">
<h1>{{ name + " " +lastName}}</h1>
<p>{{shortDescription}}</p>
<div class="text-center d-flex"><p>Applying for: </p><h3 class="ml-3">{{selectedPosition}}</h3></div>
</div>
<div class="col-3">
<h3>Main Skills</h3>
<ul>
<li ng-repeat="x in skills"> {{x}}
</li>
</ul>
</div>
</div>
</div>
i'm assuming i must be missing something with the controller if anyone can take a quick look please i would really appreciate it, the prototype is suppose to be a CV upload just to learn how to use angular 1 and then go ahead with other libraries, i think understanding the routing is a big step for me. anyways thank you.
Add the controller in your HTML - like ng-controller="myCtrl"
I have one search box in one page i.e header.html file and the list on which i want to implement the search functionality is on another page i.e content.html. So how can i use angularjs search functionality in this case. Below is the html code.
header.html
<div class="input-group col-md-12 search-inner-page ">
<input type="text" class="form-control" placeholder="Search" name="q">
</div>
content.html
<div class="surveyList" ng-repeat="survey in allSurveys">
<span class="checkbox" ></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div>
<div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"></a>
<a class="deleteSurvey" title="delete"></a>
<a class="exportSurvey" title="export survey"></a>
<a class="menuSurvey" title="menu"></a>
</div>
</div>
contentCtrl.js
angular.module("adminsuite").controller("surveyController",['getAllSurveyService','AuthenticationService', '$scope','$rootScope', '$state', function(getAllSurveyService,AuthenticationService, $scope,$rootScope,$state){
getAllSurveyService.surveyList().then(
function( data ) {
$scope.allSurveys = data;
console.log($scope.allSurveys);
if($scope.allSurveys.ErrorMessage){
AuthenticationService.ClearCredentials();
$state.go('login');
}
}
);
}]);
headerController.js
angular.module("adminsuite").controller("headerController",['AuthenticationService','$rootScope','$cookieStore','$scope',function(AuthenticationService,$cookieStore,$scope,$rootScope){
$scope.header = "Header";
$scope.searchInSurvey = $scope.surveySearch;
$scope.logout = function(){
//$scope.dataLoading = true;
AuthenticationService.ClearCredentials();
console.log($cookieStore.get('globals'));
//$state.go('login');
};
}]);
On typing something in the search box of header.html as mentioned above, it should search the content in content.html page.
You could maybe use a ng-change on the input of header.html to update the allSurveys array.
Just add a ng-change and a ng-model to your input
<div class="input-group col-md-12 search-inner-page ">
<input ng-model="yourCtrl.searchInput" ng-change="yourCtrl.searchInputChanged" type="text" class="form-control" placeholder="Search" name="q">
</div>
In your controller you can add a function searchInputChanged that will filter the data based on searchInput using .filter().
You can set your list of Surveys in a variable into a $rootScope, and get its value from another controller, like this:
//Controller that contains the list
$rootScope.surveysList = [s1,s2,s3,...,sn];
After that, you can get this variable and set into the controller scope where your input is.
$scope.allSurveys = $rootScope.surveysList;
Your input should be like this:
<input ng-model="surveySearch" type="text" class="form-control" placeholder="Search" name="q">
And que query in your list template should be like this:
ng-repeat="survey in allSurveys | filter:surveySearch"
I hope it works for you
Thank You guys. I got the answer like this...
header.html
<div class="input-group col-md-12 search-inner-page">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="global.search">
<img src = "images/search.png" alt = "Generic placeholder thumbnail" >
</div>
content.html
<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search">
<span class="checkbox" ></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div>
<div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"></a>
<a class="deleteSurvey" title="delete"></a>
<a class="exportSurvey" title="export survey"></a>
<a class="menuSurvey" title="menu"></a>
</div>
headerCtrl.js
$rootScope.global = {
search: ''
};
I have a binding problem with one of my directives that is causing me problems. Usually I don't have problems with binding but I can't see the bug. I have this directive:
radioMenuDirective.js
(function () {
"use strict";
var myAppModule = angular.module('myApp');
myAppModule.directive('radioMenuAllocateSection', function () {
return {
templateUrl: 'Scripts/app/shared/radiomenu/tmplAllocateSection.html',
restrict: 'E',
scope: {
allocatedTo: '='
},
controller: [
'$scope', 'genericService', function ($scope, genericService) {
$scope.radio = {
name: 'department'
};
}
],
}
});
})();
tmplAllocateSection.html
<label>Allocate Section To:</label>
<br/>
<form name="myForm" ng-controller="ExampleController" class="form-inline">
<div class="form-group">
<label>
<input type="radio" ng-model="radio.name" value="department">
Department
</label>
<label>
<input type="radio" ng-model="radio.name" value="user">
User
</label>
<div ng-if="radio.name == 'department'">
{{allocatedTo}}
<department-dropdown department="allocatedTo"></department-dropdown>
</div>
<div ng-if="radio.name == 'user'">
{{allocatedTo}}
<user-dropdown user="allocatedTo"></user-dropdown>
</div>
</div>
</form>
I can see the scope variable within my directive with
{{allocatedTo}}
However above this directive is another 1
tmplSectionCategories.html
<form role="form" name="frmContactDetails">
the enquiry data: {{enquiryData.selectedPersonOrDep}}
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Section Categories:</h3>
</div>
<h6>
<div class="panel-body">
<div class="form-group col-md-6 ignore-left-padding">
<subject-topic-dropdown selected-subject="enquiryData.subject" selected-topic="enquiryData.topic"></subject-topic-dropdown>
<keywords-dropdown selected-subject="enquiryData.subject"></keywords-dropdown>
<div class="form-group col-md-12 ignore-left-padding">
<genus-dropdown selected-genus="enquiryData.genus"></genus-dropdown>
</div>
<plant-names-dropdown selected-plant="enquiryData.plant"></plant-names-dropdown>
</div>
<div class="form-group col-md-6 ignore-left-padding">
<department-keyword-dropdown selected-department="enquiryData.department" selected-keyword="enquiryData.keyword"></department-keyword-dropdown>
<div class="form-group col-md-12 ignore-left-padding">
<label class="col-md-12 control-label ignore-left-padding">Quantity:</label>
<div class="col-md-8 ignore-left-padding">
<div class="col-md-2 ignore-left-padding">
<input type="number" ng-model="enquiryData.quantity" class="form-control input-sm" style="width: 50px" min="0" />
</div>
</div>
</div>
<radio-menu-allocate-section allocated-to="enquiryData.selectedPersonOrDep"></radio-menu-allocate-section>
</div>
</div>
</h6>
</div>
</div>
</form>
Directive declared on page
<radio-menu-allocate-section allocated-to="enquiryData.selectedPersonOrDep"></radio-menu-allocate-section>
</div>
{{enquiryData.selectedPersonOrDep}}
This doesn't show anything when the dropdown changes, so I have a problem where I don't have the value after selecting a value. I need it above for a button click handler.
I'm using Fuelux Checkbox component and I'm trying to toggle some DIV based on checkbox checked. I'm doing as follow:
$(document).ready(function(){
$('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").toggle(!this.checked);
$("#rifSucursal").toggle(this.checked);
});
$('#chkRif').on('checked.fu.checkbox', function () {
$("#rifEmpresa").toggle(!this.checked);
});
});
But is not working since #rifEmpresa is always show no matter what checkbox is checked or not. Te right way should be:
Check the first visible checkbox "Click me"
Hide #rifEmpresa DIV and show #rifSucursal right now that is show but the first is not hide
Toggle #rifEmpresa on RIF? checkbox checked
This is the related HTML code:
<form enctype="multipart/form-data" id="registroEmpresa" role="form" class="form-horizontal" method="POST">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div id="chkSucursal" data-initialize="checkbox" class="checkbox highlight">
<div class="col-xs-4 control-label"><strong>Check me</strong>
</div>
<div class="col-md-6 col-sm-4 checkbox">
<label class="checkbox-custom">
<input type="checkbox" id="sucursal" name="sucursal" value="1" class="sr-only">
</label>
</div>
</div>
</div>
<div style="display: none;" id="rifSucursal" class="form-group">
<div class="row">
<label class="col-sm-4 control-label">Find company<span class="text-danger">(*)</span>
</label>
<div class="col-md-6 col-sm-4">Some FORM element to Show</div>
</div>
<div class="row">
<div id="chkRif" data-initialize="checkbox" class="checkbox highlight">
<div class="col-xs-4 control-label"><strong>RIF?</strong>
</div>
<div class="col-md-6 col-sm-4 checkbox">
<label class="checkbox-custom">
<input type="checkbox" id="chkRif" name="chkRif" value="1" class="sr-only"> <span class="checkbox-label">(check me to show "Some Form Element to HIDE")</span>
</label>
</div>
</div>
</div>
</div>
<div id="rifEmpresa" class="form-group has-feedback">
<label class="col-xs-4 control-label">RIF <span class="text-danger">(*)</span>
</label>
<div class="col-md-6 col-sm-4">Some FORM element to Hide</div>
</div>
</div>
</div>
</form>
Can any give me some help and tell me what I'm doing wrong and how to fix my code? Here is a simple Fiddle for testing purposes
try this
http://jsfiddle.net/31roa5hz/2/
$(document).ready(function(){
$('html').addClass('fuelux');
$('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").hide('slow');
$("#rifSucursal").show('slow');
});
$('#chkSucursal').on('unchecked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").show('slow');
$("#rifSucursal").hide('slow');
});
$('#chkRif').on('checked.fu.checkbox', function () {
$("#rifEmpresa").show('slow');
});
$('#chkRif').on('unchecked.fu.checkbox', function () {
$("#rifEmpresa").hide('slow');
});
});
I think the control you're using doesn't have any property as checked, i tried to know if that element is checked or not using .is(':checked') it returns undefined. so i think the updated code is better for you as the UI control you're using has its own custom events which can be captured.
You should be able to do this:
$('input').on('change', checkboxChanged);
Like a normal checkbox. If you can't, it's a bug and you may want to try checking out/bower install #master, since we have been bugfixing the checkbox control over the past two weeks.
I do know that the checked attribute was not getting set in Fuel UX 3.4.0.
I have this following form
<form action="" class="form-horizontal">
<div id="wrapper">
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label"><?=$core->l("default_comm_type");?></label>
<div class="controls">
<select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
<?=combo_creator::render_default_comm_types()?>
</select>
</div>
</div>
</div>
<div class="span4 checkerAlign">
<div class="control-group">
<div class="controls">
<?=$core->l("is_active");?>
</div>
</div>
</div>
<div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
<div>Add Row</div>
</div>
The question is when user clicks Add Row button, I need to create a copy of this form elements inside
<div id="wrapper">
How can i do that?
EDIT: SOLVED
<form action="" class="form-horizontal" id="wrapper">
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label"><?=$core->l("default_comm_type");?></label>
<div class="controls">
<select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
<?=combo_creator::render_default_comm_types()?>
</select>
</div>
</div>
</div>
<div class="span4 checkerAlign">
<div class="control-group">
<div class="controls">
<?=$core->l("is_active");?>
</div>
</div>
</div>
<div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
add
</form>
In the Js part:
jQuery("#addMore").click(function(){
var contents = jQuery("form").html();
jQuery("#wrapper").append(contents);
});
When add is clicked it inserts form elements just as I wanted
and when delete is clicked it deletes elements. Thank you for the tips guys
Problem solved! Thanks guys.
I think you need to duplicate the contents of (row-fluid), not the whole (Wrapper) contents, this should let you add more rows of your original form template when clicking on AddMore link.
This is an edit to the suggested solution by #user2389688:
$("#addMore").click(function(){
$(".row-fluid:last").clone().appendTo(".wrapper");
});
JsFiddle Link:
http://jsfiddle.net/tCY8v/1/
Something like this ?
$("#addMore").click(function(){
var contents = $("form").html();
$("#wrapper").append(contents);
});
http://jsfiddle.net/tCY8v/
If I did understand your question correctly.
For example:
$('#addMore').click(function() {
$('.row-fluid').eq(0).clone().insertBefore(this);
});