I'm following along the example of how to use the DatePicker widget but it doesn't seem to load correctly on my app. I'm currently doing:
<div class="form-group row">
<label for="start_date" class="col-sm-3 col-form-label">Start Date</label>
<div class="col-sm-9">
<input kendo-date-picker />
</div>
</div>
Unfortunately, this doesn't correctly create the widget and only creates a text input box. Does anyone know why this problem could be happening? I would appreciate any insight!
You must be missing some markup and/or the app initialization.
Here's a working DatePicker with the markup in your question wrapped in an ng-app div and with the app being initialized in script:
https://dojo.telerik.com/#Stephen/elURO
HTML:
<div ng-app="app" ng-controller="MyCtrl">
<!-- This is your markup -->
<div class="form-group row">
<label for="start_date" class="col-sm-3 col-form-label">Start Date</label>
<div class="col-sm-9">
<input kendo-date-picker />
</div>
</div>
<!-- End of your markup -->
</div>
script:
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
});
Related
I was hoping someone could tell me what I was doing wrong with the ngMessages directive. The code I am using is:
<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<div ng-controller="SomeController">
<div class="row">
<div class="col-md-6">
<form name="profileForm" ng-submit="model.submit()" novalidate>
<div>
<label for="username">Your user name:</label>
<input type="text" id="username" name="username" required placeholder="User name" ng-model="model.user.username">
<div class="help-block" ng-messages="profileForm.username.$error">
<div ng-messages-include="error-messages"></div>
</div>
</div>
<button>submit</button>
</form>
</div>
</div>
</div>
And I created a plunk here ng-messages-include plunk
Been at this for hours.
Thanks
ngMessages does not ship with angular by default. So, when you add ng-messages directive, angular doesn't compile it and nothing happens.
What you should do is add ng-messages to a script tag and add the module ngMessages in your app definition.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
var anApp = angular.module('anApp', ['ngMessages']);
See the updated plunker: http://plnkr.co/edit/1CtamfeVCpggDApH9Enp?p=preview
I am using bootstrap accordion in angular js. The panels are opening If I click on the heading directly but I need to add plus/minus symbols for each heading. Please help me out in achieving the functionality like If I click plus icon, panel should be open and If I click on minus symbol, the panel should be closed. Thanks in advance.
Sorry, I Cannot able to add fiddle or plunker as the data is coming from my local database.
<uib-accordion close-others="oneAtATime" class="accordion-data">
<uib-accordion-group heading="title from database" ng-repeat="values are coming from database">
<div class="row">
<div class="col-md-12">
<div class="row row-head">
<div class="col-md-6 col-xs-6">
</div>
</div>
<div class="row item-head accordion-content" ng-repeat="values are coming from database">
<div class="col-md-4 col-xs-4"><input type="checkbox" ng-model="check" >data from database
</div>
<div class="col-md-8 col-xs-8 service-data">
<div class="row">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2">
<input type="number" class="form-data" ng-disabled="!check">
</div>
<div class="col-md-2 col-xs-2">
<input type="number" name="times" class="form-data" ng-disabled="!check">
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
</div>
</div>
</div>
</div>
</div>
</uib-accordion-group>
</uib-accordion>
I don't know the specifics about your implementation, but you could make use of the CSS :before pseudo-element like I have done in this simple fiddle.
If you have a way of selecting the accordion header by the open/closed state, then you can do something similar to this:
.accordion li.open:before {
content: '- ';
}
.accordion li.closed:before {
content: '+ ';
}
glyphicon glyphicon-plusIf you want to handle this in javascript, you could use the collapse event described here.
shown.bs.collapse will fire when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hidden.bs.collapse will fire when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
$('#yourCollapseDiv').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon glyphicon-minus").addClass("glyphicon glyphicon-plus");
});
$('#yourCollapseDiv').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon glyphicon-plus").addClass("glyphicon glyphicon-minus");
});
It uses glyphicons to display the + and -
i'm using camunda 7.2
In my process i have two user tasks (the first one a simple form to insert data, and the second one to show the same form readonly).
I'm using embedded forms.
I have the following form but i have a problem: using the ng-if directive i don't able to instantiate process variable, while if i use ng-show it works.
<form role="form" name="form" cam-form class="form-horizontal">
<div ng-if="typeRequest == 'firstCase'">
<h4 class="text-center">title</h4>
<!-- Oggetto -->
<div class="form-group">
<label for="oggetto" class="col-sm-4 control-label">Oggetto:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="oggetto" cam-variable-name="oggetto" cam-variable-type="String" required="required">
</div>
</div>
<!-- Nota descrittiva -->
<div class="form-group">
<label for="notadescrittiva" class="col-sm-4 control-label">Nota descrittiva:</label>
<div class="col-sm-8">
<textarea class="form-control" rows="3" id="notadescrittiva" cam-variable-name="notaDescrittiva" cam-variable-type="String"></textarea>
</div>
</div>
<!-- Data -->
<div class="form-group">
<label for="data" class="col-sm-4 control-label">Data:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="data" cam-variable-name="data" cam-variable-type="String" required="required">
</div>
</div>
<!-- Indirizzo -->
<div class="form-group">
<label for="indirizzorichiesta" class="col-sm-4 control-label">Indirizzo:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="indirizzorichiesta" cam-variable-name="indirizzo" cam-variable-type="String" required="required">
</div>
</div>
</div>
Please, any idea?
Thanks in advance
I think this is because ng-if does not renders anything in the DOM.
You probably should use ng-show instead.
I am facing a problem with AngularJS. I have made an application where a user can
select a value from a dropdown list. If the user presses the "add" button, then an array is created that holds all his selections. I want to populate a textbox with all these selections. I have tried ng-repeat but it creates multiple textbox with each array value. This is what I've made so far:
Controller
$scope.multiCompare= [];
// Create the function to push the data into the "multiCompare" array
$scope.newCompare = function () {
$scope.multiCompare.push($scope.compareDate);
$scope.multiComparedate = '';
};
HTML
<div class="form-group">
<label for="installation_year" class="col-sm-2 control-label">Period</label>
<div class="col-sm-4">
<select class="form-control" ng-model="compareDate" ng-options="res for res in compareDates " ng-disabled="disableFormInput()" ></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="newCompare()">Add</button>
</div>
</div>
<div class="form-group">
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
<div> {{num}}</div>
</div>
</div>
The first image shows the result I'm getting when adding 2013 and 2014 and the second shows what I would like it to return.
Can someone help me through this?
Thanks in advance..
For rendering your Compare field input, you can take use of ngList directive. That will bind your comma(,) separated output directly to the input element.
Change
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
<div> {{num}}</div>
</div>
</div>
TO
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<input class="form-control" type="text" ng-model="multiCompare" ng-list/>
</div>
This could help you, Thanks.
I have managed to do what I wanted. I changed my html code to this:
<div class="form-group">
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div data-ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="multiCompare" ng-list {{num}} ng-show="$last" />
</div>
</div>
</div>
And it worked!
Your ng-list suggestion was really helpful! Thank you very much!
All,
I am working on an AngularJS form and am trying to see how the ng-messages directive works with ng-messages-multiple. I can't seem to get it to pick up multiple errors. I expect to see both the required and minimum errors at the same time but for some reason I only see required, then minimum. I posted the HTML below. I have the ng-messages included using bower, the script call in my index.html page, and I am injecting into my app.js module as required.
I am using AngularJS v1.3.2 in this project.
<div class="panel panel-default">
<div class="panel-heading">
<h1>Validation Test Form</h1>
</div>
<div class="panel-body">
<form class="form" name="form" role="form" ng-submit="submit(form)">
<div class="row">
<div class="form-group" show-errors>
<label for="name">Name:</label>
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
<div ng-messages="form.name.$error" ng-messages-multiple class="has-error">
<div ng-message="required">Required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
{{formError}}
</div>
</div>
Try to use ng-minlength instead minlength
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
ng-minlength="5"
required/>
instead
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
EDIT
It is normal behaviour for ng-minlength directive, this directive validate only when we have not 0 size of input, entered a value it must be at least 5 characters long, but it's ok to leave the field empty, and, unfortunately, in anyway you don't achieve, that you want. I offer you to create your custom directive or see in direction ng-pattern directive with need behaviour, if you very want that showing two message.