I am new to AngularJs and Bootstrap. I am having trouble with date binding.
My JSON has a date in YYYY-MM-DD format, but it is not binding with the Bootstrap date control.
Is it not possible with out directives or any other UI library (like angular strap or UI etc)
I have created plunker, please let me know if I have made some mistakes
http://plnkr.co/edit/FUjgepdJwC3N5iU6Cqlw?p=preview
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div class="panel-body" ng-controller="ActionPlanDetailCtrl">
<form role="form">
<div class="form-group">
<label for="id">ID</label> <input type="text" class="form-control" id="inputId" placeholder="ID" ng-model="actionPlan.id"
title="ID"
>
</div>
<div class="form-group">
<label for="visitDate">Visit Date</label> <input type="date" name="inputVisitDate" ng-model="actionPlan.visitDate"
class="form-control" placeholder="yyyy-MM-dd"
>
</div>
<div class="form-group">
<label for="name">Subject</label> <input type="text" class="form-control" id="inputSubject" placeholder="Subject"
ng-model="actionPlan.subject" title="subject"
>
</div>
</form>
</div>
</body>
</html>
app.js
'use strict';
angular.module('myApp', [ 'dealerActionPlanModule' ]);
angular.module('dealerActionPlanModule', []);
/* Controllers */
angular.module('dealerActionPlanModule');
angular.module('dealerActionPlanModule').controller('ActionPlanDetailCtrl',
[ '$scope', function($scope) {
$scope.actionPlan = {
id : '123',
region : 'North',
visitDate : '2014-01-01',
subject : 'High Complaint in May'
} ;
} ]);
Note : I prefer to have simple solution, as I am new to Java Script and angular JS (Basically a java guy)
Any help is appreciated.
The easiest way is convert your string to Date object please see here
http://plnkr.co/edit/i1dsnV4pZqIuIArRgqTl?p=preview
angular.module('dealerActionPlanModule').controller('ActionPlanDetailCtrl',
[ '$scope', function($scope) {
$scope.actionPlan = {
id : '123',
region : 'North',
visitDate : '2014-02-01',
subject : 'High Complaint in May'
} ;
$scope.actionPlan.visitDate =new Date( Date.parse( $scope.actionPlan.visitDate));
} ]);
angular.module('dealerActionPlanModule').controller('ActionPlanDetailCtrl',
[ '$scope','$filter', function($scope,$filter) {
$scope.actionPlan = {
id : '123',
region : 'North',
visitDate : new Date('2014-02-01'),
subject : 'High Complaint in May'
} ;
$scope.date= $filter('date')($scope.actionPlan.visitDate, 'medium')
$scope.date1=$filter('date')($scope.actionPlan.visitDate, 'shortDate')
console.log($scope.date);
console.log($scope.date1);
} ]);
Related
I am getting a form data from json.I have binded all data into a form fields, but Resource field data coming as separate object and I want to show it as comma separated.I tried this,But its showing two resouce fields. How to do it?
Here is my code
<form ng-repeat="data in editProjDetails">
<div>
<label class="displayBlock">Project Name</label>
<label><input type="text" ng-model="data.ProjectName" ng-disabled="all"></label>
</div>
<div>
<label class="displayBlock">Client</label>
<label><input type="text" ng-model="data.Client" ng-disabled="all"></label>
</div>
<div id="projectCoOrdBlock">
<label class="displayBlock">Project Co-ordinator</label>
<label><input type="text" ng-model="data.ProjectCoordinator" ng-disabled="true"></label>
</div>
<div id="resourceBlock">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-repeat="x in data.ResourceAllocated" ng-model="x.ResourceName" ng-disabled="true"></label>
</div>
</form>
I did this in jquery.This is what I am trying to implement in angular
rAllo = data.ResourceAllocated;
if (rAllo.length == 0) {
$("#resource").val("No resources available");
}
else {
for (var i = 0; i < rAllo.length; i++) {
var arrayDatas = rAllo[i].ResourceName;
resource.push(arrayDatas)
}
$("#resource").val(resource)
}
$scope.resourceAllocated= $scope.data.ResourceAllocated.map(function(el){return el.name}).join(",");
<input type="text" ng-model="resourceAllocated">
Try using this
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="resourceAllocated">
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.yearbtn = [
{year:'2022'},
{year:'2021'},
{year:'2019'},
{year:'2018'},
{year:'2017'},
{year:'2016'},
{year:'2015'},
];
$scope.resourceAllocated= $scope.yearbtn.map(function(el){return el.year}).join(",");
});
</script>
</html>
Working Demo
Try it like this,
<div id="resourceBlock" ng-repeat="x in data.ResourceAllocated">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-model="x.ResourceName" ng-disabled="true"></label>
</div>
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data =[{"Id":1010,"ProjectName":"aaa","Client":"aaa","ProjectCoordinator":["RajkumarS"],"OnsiteCoordinator":"aaa","ResourceAllocated":[{"ResourceName":"RajkumarS","ResourceId":9,"RoleName":"Manager"},{"ResourceName":"aSd","ResourceId":1012,"RoleName":"tester"}],"ProjectRoles":null}];
$scope.resourceAllocated= $scope.data[0].ResourceAllocated.map(function(el){return el.ResourceName}).join(",");
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>
<body ng-controller="myCtrl">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-model="resourceAllocated" ></label>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
</body>
</html>
This is very Basic issue of angular but I am unable to fix this; I want to validate email address using ng-pattern but it failed on some condition
see the working Demo
failed condition : when i write some#thing it validated OK but that is not correct. Kindly help me to solve this veri basic issue.
(function() {
var app = angular.module('app', []);
app.controller ('MainCtrl', function ($scope){
var vm = this;
vm.title = "Email Validation";
vm.email = "";
vm.email_regex = '^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$';
});
})();
<html ng-app="app">
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<h2>{{vm.title}}</h2>
<div class="col-md-12">
<form name="emailForm" novalidate="">
<div class="form-group" ng-class="{'has-error': emailForm.username.$touched && emailForm.username.$invalid }">
<label>Email</label>
<input type="email" class="col-md-12 form-control" name="username" ng-model="vm.email" ng-pattern="vm.email_regex" required />
</div>
<div ng-if="emailForm.username.$touched && emailForm.username.$invalid" ng-messages="emailForm.username.$error" class="text-danger">
<span ng-message="pattern">Invalid Username.</span>
<span ng-message="required">Please enter Username.</span>
</div>
</form>
</div>
<div class="row"></div>
<hr />
<pre>{{ emailform.username.$error | json }}</pre>
</body>
</html>
You need to remove ' '
from vm.email_regex
DEMO: http://plnkr.co/edit/tbLP5syvZEq7qtE4X75o?p=preview
Refer this: Why is Angularjs ng-pattern not working with the following regexp?
(function() {
var app = angular.module('app', []);
app.controller ('MainCtrl', function ($scope){
var vm = this;
vm.title = "Email Validation";
vm.email = "";
vm.email_regex = /^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
});
})();
I have 1 drop-down which contains values("Due Date","Tenure","NA". these values come from database) respectively.I have 2 text boxes textbox1 and textbox 2. I want textbox1(i.e DueDate) enabled if Dropdown value selected as "Due Date" & textbox2(i.e.TenureDate) enabled if Dropdown value selected as "Tenure".
<div>
#Html.DropdownListFor(m=>m.Tenure,new{ng_options="c
as c.name for c in duedateddl"})
</div>
<div>
#Html.TextBoxFor(m=>m.DueDate)
#Html.TextBoxFor(m=>m.TenureDate)
</div>
(function(angular) {
'use strict';
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
model: null,
availableOptions: [
{name: 'DueDate'},
{name: 'TenureDate'},
{name: 'NA'}
]
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.name}}</option>
</select>
<input type="textBox1" ng-disabled="data.model != 'DueDate'"/>
<input type="textBox2" ng-disabled="data.model != 'TenureDate'"/>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
</body>
</html>
I got this code from Vladyslav Babenko from this post over here (Clone elements in angularjs):
var App = angular.module('App', []).controller('Test', ['$scope',
function($scope) {
$scope.inputCounter = 0;
$scope.inputs = [{
id: 'input'
}];
$scope.add = function() {
$scope.inputTemplate = {
id: 'input-' + $scope.inputCounter,
name: ''
};
$scope.inputCounter += 1;
$scope.inputs.push($scope.inputTemplate);
};
$scope.teste = function (pergunta) {
console.log("in");
}
}
])
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Test">
<form ng-submit="teste()">
<div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">`enter code here`
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</div>
</form>
<button type="button" id="add" ng-click="add()">Add</button>
<button type="submit">teste</button>
</body>
</html>
It works fine, but when a add multiples forms, how can I get the values from each form?
Give every input a ng-model:
<input type="text" class="pure-input-1" id="input-2" ng-model="user.name" name="input-2">
Now you can adress the input value in your controller with:
$scope.user.name
Read more about this topic: https://docs.angularjs.org/guide/forms
I am a beginner in angularjs and I am sure there must be an easy solution to it but I can't pin it. I am trying to get style for an element through a function, however unsucessfully. Here is the code:
Script.js:
(function(angular) {
'use strict';
angular.module('docsBindExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.color = "{'background-color':'red'}";
$scope.fetchStyle = function(){
return {'background-color':'red'};
};
$scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)';
}]);
})(window.angular);
Index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example9-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsBindExample">
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name" ng-style="fetchColor()"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
</body>
</html>
I am using fetchColor() to get the color for the span. Is there some syntax mistake or something else? All responses appreciated.
ng-style needs an expression. Also you are using fetchColor() in markup but have fetchStyle() in controller
Try
<span ng-bind="name" ng-style="{{fetchStyle()}}"></span> <br/>
<span ng:bind="name" ng-style="{{color}}"></span> <br/>
In addition you are creating a string for $scope.color
Change:
$scope.color = "{'background-color':'red'}";
To
$scope.color = {'background-color':'red'};
DEMO